Random image generator but never repeat same image - Javascript

Question

I have an image slider and I put them into a random order of output but i realized that one of the images keeps repeating. Is there any way to prevent repeating images with using Math.random()?

This is what I've done so far: http://jsfiddle.net/Y4jr6/

<script type="text/javascript" language="javascript">

//switch the landing page background images
function slideSwitch() {
    //set variable active
    var $active = $('#slideshow IMG.active');

    //check if attribute active exists
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    //throw images in random order
    var $sibs  = $active.siblings();
    var rndNum = Math.floor(Math.random() * $sibs.length );
    var $next  = $( $sibs[rndNum] );

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 7000 );
});

</script>

Any help would be much appreciated!!

score 3 · Accepted Answer · answered Aug 05 '13 at 00:10

3

Think of it like a deck of cards. Make a list of all the images you want to show, and after you show it, remove it from the list (now you won't be choosing duplicates). Just make sure your random number that's generated is bounded by the current list length.

answered Aug 05 '13 at 00:10

Colonel Panic

1,604
2
20
31

Is it possible for you to show me how an example? Because I have no clue to even approach that – Elmer Aug 05 '13 at 00:18
I wish I could help more, but my javascript/jquery knowledge isn't all that great. Try creating a full example on http://jsfiddle.net/ and edit your original question, then someone else can help. – Colonel Panic Aug 05 '13 at 00:25

score 2 · Answer 2 · answered Aug 05 '13 at 00:10

2

A good way to do this is to create an array containing the indexes of your images (that is, 0 ... n), shuffle the array, and then increment through the array. You can re-shuffle whenever you want, though of course if you re-shuffle at the end of a single "pass" through the array you may get a repeat by chance.

answered Aug 05 '13 at 00:10

Pointy

405,095
59
585
614

Is it possible for you to show me how an example? Because I have no clue to even approach that – Elmer Aug 05 '13 at 00:22
1

Did you search for "shuffle array in Javascript"? You must be lazy, apparently not. http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript – Thomas W Aug 05 '13 at 00:33

score 2 · Answer 3 · answered Aug 05 '13 at 01:51

To implement a random order that won't repeat you can do the following.

Define the images in an array:

var images = [img1, img2, img3, img4, ...]; //image objects or URLs

Now implement a custom sorter that will randomize that array:

images.sort(randomize);

function randomize() {
    return 0.5 - Math.random();
}

The custom sorter works by comparing an a and b value and return 0 for equal < 0 or > 0 depending on the conditions. Here we just return a random value between -0.5 and +0.5 which means the items will be sorted randomly as well.

The array is now randomized and you can iterate through it well knowing it won't repeat any of the images until you start over again.

Random image generator but never repeat same image - Javascript

3 Answers3