Tutorial :image rotators in the same page with jQuery



Question:

after a day trying to make this work, I finally decide to ask for help ;-), Since I'm a new at jQuery, I hope to find someone to help fix this issue. I have a portfolio page where I need to run the gallery in a growl for each single project. Everything works just fine until I'm adding a second gallery. The code that I have for each block in my html markup looks like this:

<ul class="rotator_details">       <li><img src="big/01.jpg" alt=""></img></li>       <li><img src="big/02.jpg" alt=""></img></li>       <li><img src="big/03.jpg" alt=""></img></li>  </ul>  

Jquery like so

function init_rotator_details() {        if (!$('.rotator_details').length) {            // If not, exit.          return;      }        // Rotate speed.          // Pause setting.      var pause = false;        // Rotator function.      function rotate(element) {            // Stop, if user has interacted.          if (pause) {              return;          }            // Either the next /first <li>.          var $next_li = $(element).next('li').length ? $(element).next('li') : $('.rotator_details li:first');            // Either next / first control link.          var $next_a = $('.rotator_details_controls a.current').parent('li').next('li').length ? $('.rotator_details_controls a.current').parent('li').next('li').find('a') : $('.rotator_details_controls a:first');            // Animate.          $('.rotator_details_controls a.current').removeClass('current');          $next_a.addClass('current');            // Continue.          function doIt() {              rotate($next_li);          }            // Fade out <li>.          $(element).fadeOut(400);            // Show next <li>.          $($next_li).fadeIn('fast', function() {                // Slight delay.              setTimeout(doIt, 3000);          });      }        // Add click listeners for controls.      $('.rotator_details_controls a').click(function() {            // Change button text.          //$('.rotator_details_play_pause').html('PLAY');          $('.rotator_details_play_pause').html('PLAY').css({              'backgroundPosition':'right'          });            // Show target, hide other <li>.          var prev_next = $(this).attr('href');            //$($(this).attr('href')).fadeIn('fast').siblings('li').fadeOut('fast');          $("#"+prev_next).fadeIn(400).siblings('li').fadeOut(400);            // Add class="current" and remove from all others.          $(this).addClass('current').parent('li').siblings('li').find('a').removeClass('current');          ;            // Pause animation.          pause = true;            // Nofollow.          this.blur();          return false;      });      // Pause / Play the animation.      $('.rotator_details_play_pause').click(function() {          // What does the button say?          if ($(this).html() === 'PAUSE') {              // Stop rotation.              pause = true;              // Change the text.              $(this).html('PLAY').css({                  'backgroundPosition':'right'              });            } else {              // Remove class="pause".              pause = false;              // Start the rotation.              rotate('.rotator_details li:visible:first');              // Change the text.              $(this).html('PAUSE').css({                  'backgroundPosition':'left'              });          }          this.blur();          return false;      });      // Hide all but first <li>.      $('.rotator_details li:first').show();      // Wait for page load.      $(window).load(function() {          // Begin rotation.          rotate($('.rotator_details li:visible:first'));      });  }    $(document).ready(function() {      init_rotator_details();  });  


Solution:1

Your best bet is to use a class structure so the two don't overlap each other with timeouts. Just pass the new object with the timeouts.


Solution:2

Here is the Best examples of Image Rotators.... http://www.raghibsuleman.com/jquery-image-rotator-teaser


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »