homepage Welcome to WebmasterWorld Guest from 54.196.18.51
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Random First Image
geoffb




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

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




msg:4619600
 6:41 pm on Oct 28, 2013 (gmt 0)

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




msg:4619667
 10:21 pm on Oct 28, 2013 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved