Adding a Pause Button to jCarousel (slight fix)

I was recently asked by a client to add a pause button to the jCarousel-powered carousel on their site.

To do this, I used this post by Jeremy Mikola (thanks Jeremy). Here's his code:


$(document).ready(function(){ 
  $('#jcarousel').jcarousel({ 
    vertical: true, 
    scroll: 1, 
    auto: 5, 
    initCallback: function(jc, state) { 
      if (state == 'init') { 
        // Insert a play/pause button between the prev/next buttons 
        $('div.jcarousel-prev-vertical').after('<div class="jcarousel- 
toggle-vertical" style="display:block;"></div>');   

        /* Override the internal startAuto() method, which is called 
after 
         * animations complete, to prevent next/prev buttons from 
reactivating 
         * the timer while in the pause state. 
         */ 
        jc.startAutoOrig = jc.startAuto; 
        jc.startAuto = function() { 
          if (!jc.paused) { 
            jc.startAutoOrig(); 
          } 
        } 

        jc.pause = function() { 
          $('div.jcarousel-toggle-vertical') 
            .removeClass('jcarousel-play-vertical') 
            .addClass('jcarousel-pause-vertical'); 
          jc.paused = true; 
          jc.stopAuto(); 
        }; 

        jc.play = function() { 
          $('div.jcarousel-toggle-vertical') 
            .removeClass('jcarousel-pause-vertical') 
            .addClass('jcarousel-play-vertical'); 
          jc.paused = false; 
          jc.startAuto(); 
        }; 

        // Click event for playback toggle button, conditionally calls 
play/pause 
        $('div.jcarousel-toggle-vertical').click(function(){ 
          if (this.timer === null) { 
            jc.play(); 
          } else { 
            jc.pause(); 
          } 
        }); 
      } 

      jc.play(); 
    } 
  }); 
});

However, I had a bit of trouble with it and had to make a change, as follows:


For some reason, "this.timer === null" wasn't working for me. 

I replaced that section with: 

jQuery('div.jcarousel-toggle').click(function(){ 
        if (jc.paused) { 
                jc.play(); 
        } else { 
                jc.pause(); 
        } 
}); 

Seemed logical and seems to work... 

Hope that helps someone. 

I did try to post this as a comment on Nabble, but it's still pending, so I'm posting here for now.


Digg This
Reddit This
Stumble Now!
Share on Facebook
Bookmark this on Delicious
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Buzz this!


Printed from: http://www.divydovy.com/2010/11/adding-a-pause-button-to-jcarousel-slight-fix/. © divydovy 2014

2 Comments   »

RSS feed for comments on this post , TrackBack URI

Leave a Reply