How to not show the first image when you open the gallery - Fancybox 2

Question

I using Fancybox 2 to create a image gallery with the examples from their website: http://fancyapps.com/fancybox.

I\'m hiding all of the images except the first usi

Answer 1

If the first image is not going to be included in the fancybox gallery, then it doesn't need to have the fancybox class since it will be used to fire the fancybox gallery only.

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

... 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 this code for the fancybox gallery

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    padding: 0
});

Additionally, if the images for the fancybox gallery will be hidden, they actually don't need to have a thumbnail (img tag) otherwise you will be just adding an unnecessary overhead to your page load so you could do

Check JSFIDDLE