jQuery rotating through list items in a gallery, how to do this with muliple images on a page -


hi have tried above here http://www.jsfiddle.net/b3lf5/1/ trouble can not work on homepage. have work multiple images rotating @ different times (would weird if rotated @ same time), possible. appriciated, thank in advance.

the trick here make code work objects specified class instead of id. way, can have many of slideshows want. need keep array containing variables each slideshow.

fully working sample multiple "slideshows" staggered transition time.

live demo http://jsfiddle.net/b3lf5/7/

html

<div class="gallery">     <ul class="gallery-container">         <li><img src="http://placehold.it/250/ccc" alt=" "></li>         <li><img src="http://placehold.it/250/aaa" alt=" "></li>         <li><img src="http://placehold.it/250/888" alt=" "></li>         <li><img src="http://placehold.it/250/444" alt=" "></li>     </ul> </div>  <div class="gallery">     <ul class="gallery-container">         <li><img src="http://placehold.it/250/900" alt=" "></li>         <li><img src="http://placehold.it/250/090" alt=" "></li>         <li><img src="http://placehold.it/250/009" alt=" "></li>         <li><img src="http://placehold.it/250/f00" alt=" "></li>         <li><img src="http://placehold.it/250/0f0" alt=" "></li>         <li><img src="http://placehold.it/250/00f" alt=" "></li>             </ul> </div> 

javascript/jquery

var shows; var element; var length; var current; var timeout; var timers; var x;  //begin slideshows classname "gallery" initslideshows('gallery');  function initslideshows(classname){     var shows = $('.' + classname).length;      element = new array(shows);     length = new array(shows);     current = new array(shows);     timeout = new array(shows);     timers = new array(shows);     x=0;      $('.gallery').each(function(){         var myindex=x;         element[myindex] = $(this).find('li');         length[myindex] = element[myindex].length;         current[myindex] = 0;         timeout[myindex] = 1000 * (myindex+1);         element[myindex].slice(1).hide();         timers[myindex] = settimeout(function(){changeslide(myindex);}, timeout[x]);         x++;     }); } function changeslide(ind) {     element[ind].eq(current[ind]++).fadeout(300, function(){         if(current[ind] === length[ind]) current[ind] = 0;               element[ind].eq(current[ind]).fadein(300);     });     timers[ind] = settimeout(function(){changeslide(ind);}, timeout[ind]); } 

Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -