Welcome to WebmasterWorld Guest from 54.158.51.150

Forum Moderators: open

Message Too Old, No Replies

Random First Image

     
6:17 pm on Oct 28, 2013 (gmt 0)

5+ Year Member



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.
6:41 pm on Oct 28, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
10:21 pm on Oct 28, 2013 (gmt 0)

5+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month