Random First Image

[geoffb]

Hi, I have this at the moment and wondered if anyone can help me with making the first image random too.

function theRotator() {
//Set the opacity of all images to 0
$('.rotator li').css({opacity: 0.0});

//Get the first image and display it (gets set to full opacity)
$('.rotator li:first').css({opacity: 1.0});

//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

setInterval('rotate()',6000);

}

function rotate() {
//Get the first image
var current = ($('.rotator li.show')? $('.rotator li.show') : $('.rotator li:first'));

if ( current.length == 0 ) current = $('.rotator li:first');

//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.rotator li:first') :current.next()) : $('.rotator li:first'));

//Un-comment the 3 lines below to get the images in random order

var sibs = current.siblings();
var rndNum = Math.floor(Math.random() * sibs.length );
var next = $( sibs[ rndNum ] );


//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

};

Thanks for any help.

[Fotiman]

Try replacing these lines:

$('.rotator li').css({opacity: 0.0}); 

//Get the first image and display it (gets set to full opacity) 
$('.rotator li:first').css({opacity: 1.0}); 

With these:

var $liList = $('.rotator li').css({opacity: 0.0});
$($liList[Math.floor(Math.random() * $liList.length )]).css({
    opacity: 1.0
  }).addClass('show');

Basically, when you get the list of li elements and first set the opacity to 0, store that list in a variable. Next, find a random li element within that list, and set it's opacity to 1.0. Also set it's class to 'show', which seems to be what the rotate function looks for to determine the current image.

[geoffb]

Fotiman

Thank you very much for the help, and most of all the reasoning behind the code, think i have learnt a little more tonight :)

Geoff