Question

I set a random order of slides in Supersized, but only the background images are random, the thumbs stay in the same order.

This is the part of the code (supersized.3.2.7.js) that random the image slides:

// Shuffle slide order if needed
if (base.options.random){
    arr = base.options.slides;
    for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);   // Fisher-Yates shuffle algorithm (jsfromhell.com/array/shuffle)
    base.options.slides = arr;
}

And that’s how I call the slide images and set the thumbs:

jQuery(function($){
    $.supersized({
        random: 1,
        thumb_links: 1,
        slides: [
                    { image: "slide_1.jpg", thumb: "thumb_1.jpg"},
                    { image: "slide_2.jpg", thumb: "thumb_2.jpg"},
                    { image: "slide_3.jpg", thumb: "thumb_3.jpg"},
                    { image: "slide_4.jpg", thumb: "thumb_4.jpg"},
                    { image: "slide_5.jpg", thumb: "thumb_5.jpg"},
                    { image: "slide_6.jpg", thumb: "thumb_6.jpg"}
                ]
    });
});

How can I make the thumbs on the same random order of the background images?

Update

I figure it out myself: instead of using the random option in Supersized, I define a array and sort it.

var slidesArray = [
    { image: "slide_1.jpg", thumb: "thumb_1.jpg"},
    { image: "slide_2.jpg", thumb: "thumb_2.jpg"},
    { image: "slide_3.jpg", thumb: "thumb_3.jpg"},
    { image: "slide_4.jpg", thumb: "thumb_4.jpg"},
    { image: "slide_5.jpg", thumb: "thumb_5.jpg"},
    { image: "slide_6.jpg", thumb: "thumb_6.jpg"}
]

And I call the plugin:

$.supersized({
    random: 0,
    thumb_links: 1,
    slides: slidesArray.sort(function() {return 0.5 - Math.random()})
});

Works great, but I’m not so sure if it’s the best way to do it. Any suggestions?

Answer 1

I found a way, sort of…

var slidesArray = [
    { image: "slide_1.jpg", thumb: "thumb_1.jpg"},
    { image: "slide_2.jpg", thumb: "thumb_2.jpg"},
    { image: "slide_3.jpg", thumb: "thumb_3.jpg"}
]

And…

$.supersized({
    random: 0,
    thumb_links: 1,
    slides: slidesArray.sort(function() {return 0.5 - Math.random()})
});

I’m new to javascript… Any ideas on how to make it better?