fancybox does works only on last image in chrome and FF

Question

In firefox Fancybox only works on the last image (last image in the source, not the visual webpage). In IE everything works fine.

I changed ID into CLASS, but no succes yet. You can find the source here: http://www.luukratief-design.nl/dump/parallax/stack.html

please help! Bugging me for hours now.

Answer 1

The anchors are being positioned up top.

To see what I mean, open Firebug's console and type this

$('a.big').css({ border: '6px solid red' })

Now look at the red boxes all bunched up top.

I think this is because the effect is being added to the images, and not the parent links. The images are being displayed using position: absolute, and because the anchors don't have position: relative, the anchors are collapsing like they have no content.

Since you are using JavaScript, could you do something like this?

$('a.big').click(function(event) {
    event.stopPropagation(); // in case it bubbles up the parent anchor somehow and fires twice in IE
    // trigger lightbox here..
    $(this).parent('a').click();
});

Not sure if this will work, but it might be on the right track... good luck.