Can you display divs instead of images in Galleria? - javascript

I have simple gallery that I show like so
<a href="img/graph_asset_view/center_image_1.jpg">
<img src="img/graph_asset_view/center_image_1.jpg" />
</a>
Is it possible to show div instead of image on center? I tried to do something like this but it didn't work. It showed the image like even I didn't change anything.
<div style="width: 300px; height: 300px; background: blue;">
<img src="img/graph_asset_view/center_image_1.jpg" />
</a>

Please try below code :-
<div style="width: 300px; height: 300px; background:
blue;cursor:pointer;"
onclick="document.location='img/graph_asset_view/center_image_1.jpg'">
<img src="img/graph_asset_view/center_image_1.jpg" />
</div>

I assume you are asking to do the following, placing a inside of the anchor link instead of the images. Correct? If so, just do the following:
<a style="display:block" href="http://justinbieber.com">
<div class="xyz" style="min-height:500px;min-width:300px;">My div content here!
</div>
</a>

Use the "layer" property of the image json to display the div. You can set the width and height of the layer the same as the image. So only the overlay will be seen. And it is swipeable! See here for detail: http://galleria.io/docs/references/data/

Related

FancyBox issue with images and achors

I want to have images in FancyBox without margin. However setting options in JS doesn't work.
$("[data-fancybox]").fancybox({
margin: [0, 0]
gutter: 0
});
I've noticed that is because a part of anchor elements which encapsulate images are outside of those images. You can see a demo here:
jsfiddle link
When you hover between two images near a bottom you can see a 'pointer' cursor.
What can I do to fix this?
Not so much a matter of javascript, but of styling:
You have inline elements (images) within inline elements (anchors), just like some bold text inside some italic text (just worse, since your images have a lot of height...).
If you draw a border around the anchors, you see how that is bad. The browser tries to put the images "on the line". Images stick somewhat unhealthy out:
And: In "inline mode" all whitespace matters (so you'd need to make your tags ...><... to avoid that. Making your html very ugly. Inline-Block would already be a little bit better, but still spaces:
( you could set font-size: 0 on the outer wrap, but that would be an ugly hack of removing those spaces...)
Better solution
settle for block & float:
The display:block on the image prevents that the inner whitespace counts (remove, to figure out). Don't forget to clearfloat the wrapping div.
Just use
a{
display: inline-block;
}
I wont' recommend using a directly, instead use a class and add it to the anchor element.
You can try to wrap your boxes in a div and set font-size: 0 style on it. This link can be helpful as well.
$("[data-fancybox]").fancybox({
margin: [0, 0]
gutter: 0
});
#fancy {
font-size: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fancy">
<a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
<img src="http://placehold.it/150x150" alt="" />
</a><a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
<img src="http://placehold.it/150x150" alt="" />
</a><a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
<img src="http://placehold.it/150x150" alt="" />
</a><a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
<img src="http://placehold.it/150x150" alt="" />
</a>
</div>
Where do you see a margin and why do think that visual presentation of your links has any connection with fancyBox?
If you mean the space between your links, then the simplest method would be to:
a {
float: left;
}
a img {
vertical-align: top;
}
https://jsfiddle.net/1u1dnjgq/3/

How could I get the arrow image to be placed on the left of "answer1"

Here's the code, a bit messy, going to fix it up after this is answered.
<table>
<tr>
<td>
<a href="" onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';" onmouseout="document.getElementById('place-holder-1').src='';">
website screenshot service
<img src="" id="place-holder-1" style="zindex: 100; position: absolute;" />
</a>
</td>
</tr>
</table>
Here is a live demo: http://jsfiddle.net/Lrnvrdub/
And thanks for the help it's greatly appreciated.
Edit: all of the replies work fantastically but when I try to adjust the size of the image, I have tried using both css and html, an empty square is in the image's place when the link isn't hovered.
Here's an example: http://jsfiddle.net/csewukgs/
Another option to Fabio's solid answer is to use a background image.
<a class="bullet" href="">Answer1</a>
<a class="bullet" href="">Answer2</a>
.bullet {
background: url("path/to/image.png") no-repeat 0 50%;
padding-left: 18px; //width of image, plus some extra spacing
}
The benefit being that if you have a list of links, you do not need to add an img element to every one.
One caveat, if the image is non-decorative and actually communicates something important, do use an img element with an appropriate title attribute, which is helpful to screen-reader users.
<a class="bullet" href="">Answer1 <img src="..." title="The correct answer"></a>
// use Fabio's float:left solution
delete the inline style and add this
a img{float:left}
you may want to add some margin as well, but you'll get the idea
Note: it's a good idea to give a class to that img so you don't have to be this generic. Like
.bullet{float:left}
HTML
<img class="bullet" src="uyourimage" id="place-holder-1" />
This is my solution: http://jsfiddle.net/1Latpnzn/2/
It assumes that you want to shift the text to the right to make room for the image. By setting the placeholder to be as follows:
#place-holder-1 {
display: inline-block;
vertical-align: middle;
}
reordering the html:
<a href="" id="hover-link">
<img id="place-holder-1" />
<span>Answer1</span>
</a>
and removing the position: absolute; image can be positioned to the left of the text.
If you can change the position from absolute to inline block and move the image before the "answer 1" text that will work, and to get it to be aligned with the text you can add the vertial-align:bottom style
<a href=""
onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';"
onmouseout="document.getElementById('place-holder-1').src='';">
<img src="" id="place-holder-1" style="zindex: 100; position: inline-block; vertical-align:bottom" />
Answer1
</a>

Div tag background colours CSS HTML

I'm having difficulties with DIV tags again. I have managed to make it so that the users screen into 3 columns. But I'm now trying to add an individual background to each div. But the style="background:blue;" or style="background-color:blue;" don't seem to work.
Any help would be appreciated :)
http://prntscr.com/2kde62 <-- what I wanted it to look like(I used an Image for the background)
http://prntscr.com/2kdedk <-- what it look like even with the style="background:blue;"
Code Below:
<div id='leftDiv' style="float:left; margin:0; width:33%;" align="center">
<img style="position:absolute; top:160; left:170;" onclick="addKittens()" src="http://imgur.com/3mj6PL5.jpg" width="192" height="192">
</div>
<div id='middleDiv' style="float:left; margin:0; width:33%;" align="left">
<img style="position:absolute; top:200; left:650;" onclick='crazyLadyAdd()' src="http://imgur.com/7sucpdi.jpg" width="96" height="96"> <!-- Crazy Cat Lady image -->
<img style="position:absolute; top:300; left:650;" onclick='milkFactoryAdd()' src="http://imgur.com/Q9y4xBJ.png" width="96" height="96"> <!-- Milk Factory image -->
</div>
<div id='rightDiv' style="float:left; margin:0; width:33%; background:blue;" align="center">
<p style="position:absolute; left:1200; color:red; font-size:20;"> PLACEHOLDER </p>
</div>
It seems that all your div have no height attribute. Usually, the div wraps its children blocks, i.e. the img in your situation. However, you have set the img position:absolute, so the parent div cannot get height correctly.
Have you tried adding the:
{background-color:#b0c4de;}
to the CSS of that layout? Make your 'rightDiv' in CSS# and you can place in the code above, it should load.
Try adding
Overflow:hidden
to all three columns or if the height is fixed, add
height:xyzpx
to all three div's.
The div-boxes have no height due to placing the images absolute. Give them 100% height and you can style them or place the images centered and not absolute.
Here's a working sample for your case. The position absolute on the images are messing it up.
<div id='leftDiv' style="float:left;margin:0; width:33%;background:yellow ;" align="center">
<img onclick="addKittens()" src="http://imgur.com/3mj6PL5.jpg" width="192" height="192">
</div>
<div id='middleDiv' style="float:left;margin:0; width:33%;background:red;" align="left">
<img style="width:96;height:96;margin-top:200px" onclick='crazyLadyAdd()' src="http://imgur.com/7sucpdi.jpg" /> <!-- Crazy Cat Lady image -->
<img onclick='milkFactoryAdd()' src="http://imgur.com/Q9y4xBJ.png" width="96" height="96" /> <!-- Milk Factory image -->
</div>
<div id='rightDiv' style="float:left; margin:0; width:33%; background:blue;" align="center">
<p style="color:red; font-size:20;"> PLACEHOLDER </p>
</div>
You should be able to figure out the height of the images yourself. But stop using absolute on all elements. Adding a height to the divs can also fix your issue.

Removing unwanted space between images

My problem is in my navigation bar, which can be found here: http://grupocoral.netai.net/
There is a space between those images and i want to remove it. How can I do it?
Javascript Code:
function swap(element, image) {
element.src = image;
}
And the html code:
<div id="navbar"><img src="images/homeover.png">
<img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');">
<img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');">
<img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');">
<img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');">
</div>
Just in case, navbar CSS code:
#navbar{
width: 1280px;
margin: 0 auto;
height: 40px;
horizontal-align: center;
padding:inherit;
}
By the way, do you know any other way of making a menu like that without JS?
Thanks,
langel
It's due to the white space in your code. Remove the white space between your links and that should clear it up.
In other words, change your HTML block of navigation to:
<div id="navbar"><img src="images/homeover.png"><img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');"><img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');"><img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');"><img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');"> </div>
This keeps my code clean and it removes the whitespaces in the code.
<a><img src="" /></a><!--
--><a><img src="" /></a><!--
--><a><img src="" /></a><!--
--><a><img src="" /></a>
Inline elements like these are whitespace dependent, which means that browsers will render some whitespace between them.
to counter this you can either run all your elements together on one line
linklink
or block the closing and opening tags
<a href="#">
link</a><a href="#">
</a>
<a href="#">
link</a><a href="#">
</a>
:)
to remove the space just remove the break line between the anchor ex:
and i suggest to use the css without the js :
<div id="navbar">
<a class="home" href="#"></a>....
</div>
CSS :
#navbar a{display:inline-block;margin:0;}
#navbar a.member{background:url(images/member.png) no-repeat 0 0}
#navbar a.member:hover{background:url(images/memberhover.png) no-repeat 0 0}
You do have an alternative option to your javascript image swap. You can use the CSS :hover in combination with background-image.
dabblet example:
http://dabblet.com/gist/2253898
CSS:
#Membros{
background-image:url('http://grupocoral.netai.net/images/membros.png');
width:240px;
height:40px;
}
#Membros:hover {
background-image:url('http://grupocoral.netai.net/images/membrosover.png');
}
HTML
<div id="Membros"></div>
I hope this helps!
By the way, do you know any other way of making a menu like that without JS?
Yes, here is an example, I've used one of your background image link with 'Home' on it, you should use only one image without any text label on it.
you can also instead of using javascript to change the image source, use :hover css pseudo-class to change the background, it will require you to change the way is made but it will make this menu work even when JS is disabled
css_pseudo_classes

an image mapped button firing a javascript alert

I have a large image that contains a button graphic. I don't want the whole image to be clickable, just the button graphic.
When the user clicks the button, a javascript alert message must fire. Can this be done using javascript and an image map?
Thanks!
sure, alternately you could just build a div that is the same size as the image and position a clickable area inside of it:
<div style="background: url(path/to/image.jpg); height: 200px; padding: 50px 0pt 0pt 50px;">
<a onClick="alert('Button Clicked!');" href="#">
<div style="height: 20px; width: 30px;"></div>
</a>
</div>
doable
you can hide the button under the image, could have some headache in positioning tho

Categories