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 using using "display: none;"

HTML

<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<div class="hidden">
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
</div>

CSS

.hidden {
    display: none;
}

JS

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

Once you click to open the gallery I want to hide the first image so that the gallery opens up to the second image. How can i do that?

Thanks.

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)

<a class="fancyboxLauncher" href="http://fancyapps.com/fancybox/demo/1_b.jpg" title="one"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></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 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

<div class="hidden">
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"></a>
</div>

Check JSFIDDLE

Answer 2

In case someone is looking for an alternate answer, you could do something like:

<a class="fancybox" rel="group1" href="images/second-image.jpg">
  <img src="images/first-image.jpg" />
</a>
<!-- clicking on the above image will open second-image.jpg in the fancybox,
     though first-image.jpg is shown as the thumbnail. -->
<a class="fancybox" rel="group1" href="images/third-image.jpg"></a>
<a class="fancybox" rel="group1" href="images/fourth-image.jpg"></a>
<a class="fancybox" rel="group1" href="images/and-so-on.jpg"></a>

This way you don't need to write extra CSS (to hide) nor jquery (to trigger)