Supersized random thumb order

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

考虑到文档中提到random只影响幻灯片，似乎手动将列表随机化，或者以其他方式将其重新排序为几乎您需要的其他任何方式，确实是最好的方法。

Answer 2

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?