Fancybox galleries firs image launcher

Question

I have some galleries on page. First image is launcher, other images have display:none.

<?php if ($i == 1): ?>
   <a class="fancyboxLauncher" rel="group1" href="URL"><img src="URL"></a>
<?php else: ?>
   <div class="display_none">
      <a class="fancybox" rel="group1" href="URL"><img src="URL"></a>
      <a class="fancybox" rel="group1" href="URL"><img src="URL"></a>   
   </div>                   
<?php endif; ?> 

// I have some galleries (group1, group2, group3 ...etc)

<script type="text/javascript">
$(".fancyboxLauncher").on("click", function(){
    $(".fancybox").eq(0).trigger("click");
    return false;
});
</script>

<script type="text/javascript">
$(".fancybox")
    .fancybox({
        beforeLoad: function() {
            this.title = $(this.element).attr('caption');
        }
    });             
</script>

This code start only first gallery on page. How to launch any gallery?

I'm sorry for my English.

Answer 1

Assuming that you have set different galleries using a different rel attribute ...

<a class="fancybox" rel="gallery1" ...
<a class="fancybox" rel="gallery1" ...

<a class="fancybox" rel="gallery2" ...
<a class="fancybox" rel="gallery2" ...

... etc.

You could set different launchers for each gallery using the same class like :

<a class="fancyboxLauncher" data-group="gallery1" href="URL">Gallery 1 launcher</a>
<a class="fancyboxLauncher" data-group="gallery2" href="URL">Gallery 2 launcher</a>

Notice that the launchers don't need to have the same rel attribute as the images on each gallery since they are, well, just launchers (they may have the same thumbnail as the first image of the gallery though.) Also notice that we have set a data-group attribute, which indicates what gallery each launcher is targeting to.

Then you could use this code for both, the launchers and fancybox :

<script type="text/javascript">
jQuery(document).ready(function ($) {
    $(".fancyboxLauncher").on("click", function () {
        var thisGroup = $(this).data("group");
        $(".fancybox[rel=" + thisGroup + "]").eq(0).trigger("click");
        return false;
    });
    $(".fancybox").fancybox({
        beforeLoad: function () {
            this.title = $(this.element).attr('caption');
        }
    });
}); // ready
</script>

Notice that both scripts are wrapped inside the same .ready() method.

See JSFIDDLE