Starting One Gallery From Multiple Preview Pictures, With Fancybox2

I'm starting one gallery with multiple preview pictures (links). The first one begins the gallery, the next goes to a specific photo in the same gallery, but you can click through

Solution 1:

You could use a single script only and a single class for all your links. Then you could add a (HTML5) data-index attribute to any of your links to set what picture it should start the gallery from.

For instance, if you want the second link to start the gallery from the 3rd image you could do :

<a class="open_fancybox" href=""><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a class="open_fancybox" data-index="3" href=""><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a> 

Then in your script, detect if the link has the data-index attribute and set the fancybox index accordingly, otherwise start the gallery from the first element, so :

$(".open_fancybox").click(function () {
    // detect if data-index exists otherwise index = 0 (first image)
    var theIndex = $(this).data("index") ? $(this).data("index") - 1 : 0;

    $.fancybox.open([{
        href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
        title: '1st title'
    }, {
        href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
        title: '2nd title'
    }, {
        href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
        title: '3rd title'
    }, {
        href: 'http://fancyapps.com/fancybox/demo/4_b.jpg',
        title: '4th title'
    }], {
        padding: 0,
        index: theIndex // set what index should the gallery start from
    });
    return false;
});

Remember that in javascript, the index number always starts with 0, this is why we did $(this).data("index") - 1

See forked JSFIDDLE