Starting one gallery from multiple preview picture

Question

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 the entire gallery if you choose to. Think of it as a set up bookmarks that take you to different points of one larger gallery of images.

I've replicated how this is working for me now, though it's redundant and not very efficient. I'm merely faking it so that the entire thing loops. I appreciate any advice.

Here are the links:

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

Here is the redundant Javascript (showing the images in a different order for the second link):

$(".open_fancybox").click(function() {

$.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 : '3rd title'
    }
], {
    padding : 0
});

return false;

});


$(".open_fancybox2").click(function() {

$.fancybox.open([
    {
        href : 'http://fancyapps.com/fancybox/demo/3_b.jpg',                
        title : '1st title'
    },
    {
        href : 'http://fancyapps.com/fancybox/demo/4_b.jpg',                
        title : '2nd title'
    },
    {
        href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',                
        title : '3rd title'
    }, 
    {
        href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',                
        title : '3rd title'
    }
], {
    padding : 0
});

return false;

});

you can see it here:

http://jsfiddle.net/uZCC6/2687/

Answer 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