Search code examples
javascriptjqueryhtmlcssfancybox

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?

Solution

  • 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: enter image description here

    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:

    enter image description here

    ( 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:

    enter image description here

    The display:block on the image prevents that the inner whitespace counts (remove, to figure out). Don't forget to clearfloat the wrapping div.