We Keep Coding

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>

Can you display divs instead of images in Galleria?

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/

Slideshow - link slide to URL only working for last slide

I'm using lean slider: http://dev7studios.com/lean-slider/
I want to link each slide to a different url. I've noticed that only the code in the last slide gets executed (and also applied to all other slides). For instance, adding an tag to google on just the last slide results in all slides linking to google. Somehow, it only sees the very last slide - if you inspect element on the slide, you'll see it always highlights the last slide's code.
EDIT: I've also noticed that it works fine when you don't include the sample-style.css file. But without this, there is no fade/transition effect and the navigation buttons are not formatted, so it would be pointless without this file, but the issue is probably with how the slider works.
Any ideas on what's causing this or how to fix it?
The only thing changed - added links to each slide. (index.html)
...
<div id="slider">
<div class="slide">
<a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
</div>
<div class="slide2">
<a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
</div>
<div class="slide3">
<a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
</div>
<div class="slide4">
<a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
</div>
</div>
...

I just figured it out. You should edit z-index property in these three places:
.lean-slider-slide.current {
z-index: 1;
}
#slider-direction-nav {
z-index: 2;
}
#slider-control-nav {
z-index: 2;
}
You can find it in slider.css and sample-style.css when you downloaded Lean Slider.

Have a look on this EXAMPLE, it works perfectly even with external resources.
Things that you need to make sure you have:
1.Include jQuery library (jQuery MUST be included BEFORE lean-slider.js)
2.Include the lean-slider.js
3.Include the lean-slider.css
4.Make sure you have an auto_increment class on your images (slider1 , slider2, slider3, etc)
Below all these (not before) add this:
$(document).ready(function() {
$('#slider').leanSlider();
});
And make sure the div that contains your images has an ID id="slider"

Always take the last link; play with the css you can force the position of elements and enable the link for each image:
/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

How to select two links at once? (i.e. Title & Image)

i'm wondering how to achieve this kind of thumbnail gallery...
http://cargocollective.com/saintea
like when you roll over the thumbnail,
it gives an highlight effect to the title at the same time even though they are two separate elements.
I could make them as one file, but the reason why I want to have them separate is to assign
different effects :) !
can someone please lend me a hand?
thank you so much for reading this post !!!
have a great day !

It's just two <div>s in a link tag. But block elements in inline elements aren't valid, so you could better use <span> elements in a link tag like this:
HTML:
<a href="#">
<span class="one">text</span>
<span class="two">something else</span>
</a>
a:link span, a:visited span {
display: block; /* <-- for example */
color: blue;
}
CSS:
a:hover span.one {
color: yellow;
}
a:hover span.two {
color: orange;
}

As the other answers indicate, you could do it with both javascript and CSS. The page uses javascript and the framework jQuery to do it.
I made a demo of how it can be done both ways: here.
Given the following HTML:
<a href="#" id="theLink">
<img id="theImage" src="http://dummyimage.com/100x50/000/fff&text=Some+image" />
<span id="theText">Some text</span>
</a>
You can either do it with jQuery (this is roughly how that page does it):
$("#theImage").hover(
function() {
$(this).fadeTo("fast", 0.7);
$("#theText").addClass("hover");
},
function() {
$(this).fadeTo("fast", 1);
$("#theText").removeClass("hover");
}
);
where the class hover styles the text.
Here, you are telling jQuery to fire one function when you hover over the image, and another function when you hover out of the image. $("this).fadeTo sets the opacity of the image, while $("#theText").addClass.. well, it adds the class to theText.
(ofcourse, you don't need jQuery to do this, it's just very handy to use such a framework because it abstracts away much of the work)
Or with CSS:
#imagelink:hover img {
/* See http://www.quirksmode.org/css/opacity.html for opacity */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
#imagelink:hover span {
background-color: #66E8FF;
}
Here we're telling the browser that when we hover over the link with the id imagelink, the contents inside the link of type img should have an opacity of 70%, while elements of the type span should have a different background color.

It's perfectly acceptable to wrap just about any elements within a single anchor element. Most browsers already support this, and w/ HTML5 it's actually preferred. So I would just do:
<a href="#">
<img src="image.jpg" width="" height="" alt="" >
<p>Description of the image</p>
</a>
a:hover img { }
a:hover p { }

I'd do it the following way:
<img src="image.gif"
onmouseover="change image style, then change getElementById('comment') style"
onmouseout="change all back"/>
<span id="comment">some text</span>