1

Setup:

I have a set of ~20 images. I want to display 6 of them at a time and use the jQuery Cycle plugin to randomly rotate in different images from the set. I've cobbled together a solution where I call the Cycle plugin 6 different times and have every image listed in each of the 6 div's. The current solution is roughly based on this question/answer.

Problem:

I don't want duplicate images to show. Right now there will frequently be 2 or even 3 duplicates showing at the same time. This looks rather silly! I'm assuming this would involve some kind of re-writing of the array on the fly based on what image is showing (is there a way to tell?) but i'm really stuck on how to go about it.

Any help would be appreciated! Thank you!

Current Code:

$(document).ready(function(){
    var NumImages = 20, // Number of logos to show
        FirstPart = '<img src="/DEV/demo/images/',
        LastPart = '.jpg" height="50" width="100" />',
        array = ['bali.sm',          'disney.sm', 'fisherprice.sm',
                 'fruit.of.loom.sm', 'gerber.sm', 'hamilton.beach.sm',
                 'hotwheels.sm',     'igloo.sm',  'magnavox.sm',
                 'matchbox.sm',      'mohawk.sm', 'playtex.sm',
                 'purina.sm',        'rca.sm',    'remington.sm',
                 'rubbermaid.sm',    'shark.sm',  'sony.sm',
                 'sunbeam.sm',       'tonka.sm'], // array with all image names
        rnd, value, i;

    for (i = 0; i < NumImages; i++) { // pick numbers
        rnd = Math.floor(Math.random() * array.length); 
        value = array.splice(rnd,1)[0]; // remove the selected number from the array and get it in another variable

        document.getElementById('pic1').innerHTML += (FirstPart + value + LastPart);
        document.getElementById('pic2').innerHTML += (FirstPart + value + LastPart);
        document.getElementById('pic3').innerHTML += (FirstPart + value + LastPart);
        document.getElementById('pic4').innerHTML += (FirstPart + value + LastPart);
        document.getElementById('pic5').innerHTML += (FirstPart + value + LastPart);
        document.getElementById('pic6').innerHTML += (FirstPart + value + LastPart);
    }
    $("#pic1").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: -15000 });
    $("#pic2").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: -10000 });
    $("#pic3").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: -5000 });
    $("#pic4").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: 0 });
    $("#pic5").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: 5000 });
    $("#pic6").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: 10000 });
});
Community
  • 1
  • 1
WannabeVagabond
  • 67
  • 1
  • 2
  • 8
  • Maybe [this answer](http://stackoverflow.com/questions/2380019/generate-8-unique-random-numbers-between-1-and-100) might help? – Mottie Nov 01 '11 at 14:03

1 Answers1

0

I might construct a temporary array to store the numbers I've randomly generated, and then check it each time:

var tmparray = [];
for (var i=0; i<NumImages; i++) { // pick numbers
    rnd = -1; 
    while (tmparray.indexOf(rnd) == -1) {
        rnd = Math.floor(Math.random() * array.length); 
    }
    tmparray.push(rnd);
    value = array.splice(rnd,1)[0];

    ...

} // end for
Blazemonger
  • 90,923
  • 26
  • 142
  • 180