How to prevent showing same image when there are two anchors opening the same gallery with fancy box on same page?

Question

I have a page that has two ways to open a gallery of images/videos that open in fancybox 2.

The problem is that because there are two links that open the start of the gallery with the first image, the first image is displayed twice in the gallery.

Here is my example http://www.londonsitedesign.co.uk/test.html

How can I prevent the first image being displayed twice in the gallery?

Answer 1

If the first link will only start the fancybox gallery, then it doesn't need to have the fancybox class (neither an href attribute for instance)

You could actually use a different class for it (e.g. fancyboxLauncher)

<a class="fancyboxLauncher" href="#" rel="falling">Slideshow</a>

... and bind a click event to it like :

$(".fancyboxLauncher").on("click", function(){
    $(".fancybox").eq(0).trigger("click");
    return false;
});

... notice that we used the method .eq(0) to fire the gallery from the first item, otherwise it will start from the last. Also notice that .on() requires jQuery v1.7+

You still need to have this code for the fancybox gallery

$(".fancybox").fancybox({
    // API options here
});

Check JSFIDDLE