Image fading, random start?

JavaScript
1

I’m using this tutorial to create a simple list of images that fade between each other.

I can get it working fine following the instructions.

However, i wonder if any genius’s on here can tweak it so when the page loads it randomly picked image from the group and then carries on with its fades?

Basically the image will be on a home page so each time you visit i want it to be a random image from the group and then fade through the rest…

Possible?

Thanks for any help :slight_smile:

2

Here is where the default starting imge is set up.


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

Because you want it to start at a random image, we will require a few things:

[list][]the number of images, which is $(‘#slideshow IMG’).length
[]a random function, which is Math.random()
[]a way to convert the random number to an integer, which is Math.floor()
[]a way to select the random image, which is the eq() selector
[/list]

The following should do the job.


if ( $active.length == 0 ) {
    var randomIndex = Math.floor(
        Math.random() * $('#slideshow IMG').length
    );
    $active = $('#slideshow IMG:eq(' + randomIndex + ')');
}