Simple display random show

Question

I have 5 picture (pic-1.jpg, pic-2.jpg... etc..) those 5 pictures is loader into and array with text associated to the (caption) what i like to archive (with jquery or javascript) is : Get the order randomly each time the site is loaded, after hitting next, getting the next image without showing a one that have been show until the end.

I have think to use random to generate the first to display, and a push to get the other one

Do you have anothe better function... to random without repeat until show all once...

is it clear ?... i will explain more if need !

i have evaluated the pop(), but it can append that people will rotate the 5 images, and the first one must be show again... POP is no good — menardmam, Jan 21 '11 at 16:37

score 1 · Accepted Answer · answered Jan 21 '11 at 16:42

by searching 'javascript randomize array' i found a page about a fisherYates array shuffle algorithm: http://sedition.com/perl/javascript-fy.html

here's the relevant code:

function fisherYates ( myArray ) {
  var i = myArray.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}

i've made a little example using it: http://www.jsfiddle.net/fftWg/

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

What comes to randomizing jQuery objects, please have a look at this answer I've given earlier. Maybe it helps otherwise as well — not sure if I really understand what you're after ;) — display galleria list of images in random order

edited May 23 '17 at 10:24

Community

1
1

answered Jan 21 '11 at 16:29

polarblau

17,649
7
63
84

score 0 · Answer 3 · answered Jan 21 '11 at 16:34

0

The basic idea is to have a random array and pop from the top of it each time you do 'next' until you run out of array, then repeat.

answered Jan 21 '11 at 16:34

Matt

3,778
2
28
32

score 0 · Answer 4 · answered Jan 21 '11 at 16:34

0

Get your random number off of the array size. And each time you show an image remove that item from the array. After the array is empty, start over.

answered Jan 21 '11 at 16:34

Josiah Ruddell

29,697
8
65
67

score 0 · Answer 5 · answered Jan 21 '11 at 16:41

you mean something like this: Code:

function RandomSlider()
{
    var self      = this;
    this.pictures = new Array();
    this.timeout  = 2000; // wait 2000 ms
    this.aniTime  = "fast" or 1500;

    // generate a random number
    this.randomStart = function()
    {
        return Math.floor(Math.random() * self.pictures + 1);
    }

    this.SetAnimate = function(arrIndex)
    {
        setTimeout(function()
        {
            // do animation or what you want
            $(....).animate({ .... }, self.aniTime, 'linear', function()
            {
                // do stuff when you are done with animation

                if(arrIndex == self..pictures.length) 
                {
                    // when the random index is the last item in your case image 5 and array index 4
                    // then start over again, start with array index 0
                    self.SetAnimate(0);
                }
                else
                {
                    // set the next slider item ready
                    self.SetAnimate(arrIndex + 1);
                }
            });
        }, self.timeout);
    }

    this.StartSlider = function()
    {
        // start animation
        this.SetAnimate( this.randomStart() );
    }
}

Usage:

/

/ you can put in the array ID's classes attr urls all you want
    var picture_array = new Array();
    picture_array[0] = "image1";
    picture_array[1] = "image2";
    picture_array[2] = "image3";
    picture_array[3] = "image4";
    picture_array[4] = "image5";

    var slider = new RandomSlider();
    slider.pictures = picture_array;
    slider.StartSlider();

Simple display random show

5 Answers5