Fancybox random display of images

Question

I'm using Fancybox v2.0.5 with a group of images and would like to display the entire group of images in random order. I've tried a variety of jQuery shuffle scripts, but they don't seem to integrate with Fancybox.

I'd like to do this with jQuery rather than php or other server-side script.

Any suggestions?

Answer 1

You could use an array and pop values from the array at random until there are none left, done through a custom plugin randomiseGallery:

HTML:

<div id="fancyDiv">
    <a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg" title="Westfield Waterfalls - Middletown CT Lower (Graham_CS)">
        <img src="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3824/9041440555_2175b32078_b.jpg" title="Calm Before The Storm (One Shoe Photography Ltd.)">
        <img src="http://farm4.staticflickr.com/3824/9041440555_2175b32078_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg" title="Lambs Valley (JMImagesonline.com)">
        <img src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg" title="Grasmere Lake (Phil 'the link' Whittaker (gizto29))">
        <img src="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_m.jpg" alt="" />
    </a>
</div>

jQuery:

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        helpers: {
            thumbs: {
                width  : 40,
                height : 40,
                source  : function(current) {
                    return $(current.element).data('thumbnail');
                }
            }
        }
    });

(function($){
    $.fn.randomiseGallery = function() {
        return this.each(function() {                        
            var $this = $(this);
            var obj = $(this).children('a');
            var arr = $.makeArray(obj);           
            arr.sort(function() {return 0.5 - Math.random()});           
            $this.empty().show();
            arr.push("");

            var delay = 50;

            $.each(arr, function(key, val) {
                $this.append(val);
                $this.children('a').hide().fadeIn(600).delay(delay * key);
            });

        });

    };
})(jQuery);

$('#fancyDiv').randomiseGallery();

JSFiddle

Answer 2

I guess you want this functionality for a random slideshow to run on the background or so.

Unfortunately javascript doesn't have an equivalent function to php's shuffle() function. However, you could use any of javascript adapted Fisher-Yates algorithm for javascript to randomly sort your gallery.

Let's take this one from https://stackoverflow.com/a/6274398/1055987

function shuffle(array) {
    // Fisher-Yates shuffle for javascript
    // as in https://stackoverflow.com/a/6274398/1055987
    var counter = array.length, temp, index;
    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = Math.floor(Math.random() * counter);
        // Decrease counter by 1
        counter--;
        // And swap the last element with it
        temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }
    return array;
}

We will use the function above to randomize to our (manually constructed) gallery and serve it with fancybox, so no needed of any html but the fancybox trigger

<a class="fancybox" href="javascript:;">open random gallery</a>

Then the gallery will be stored inside an array like

var gallery = [{
    href: "http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg",
    title: "Westfield Waterfalls - Middletown CT Lower (Graham_CS)"
}, {
    href: "http://farm4.staticflickr.com/3824/9041440555_2175b32078_b.jpg",
    title: "Calm Before The Storm (One Shoe Photography Ltd.)"
}, {
    href: "http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg",
    title: "Lambs Valley (JMImagesonline.com)"
}, {
    href: "http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg",
    title: "Grasmere Lake (Phil 'the link' Whittaker (gizto29))"
}];

... and we will randomize it every time we click our trigger ( the .fancybox selector ) like :

jQuery(document).ready(function($) {
    $(".fancybox").on("click", function () {
        $.fancybox(shuffle(gallery), {
            //API options
            type: "image"
        });
    }); // on                
}); // ready 

See JSFIDDLE

NOTE: I am not sure if this is what you were looking for but I found the exercise interesting and eventually useful for other people applications.