Howto: Adding a pause button to jcarousel

[Jeremy Mikola]

I'm using jcarousel (in vertical alignment) for a project and
discovered a need for a button to pause/resume the plugin from auto-
scrolling through its contents.  I was a bit surprised that I wasn't
able to find any previous example of this online; all the more reason
to share, though.  Feedback and criticism is more than welcome.

I was working off of Jan Sorgalla's original documentation:
http://sorgalla.com/projects/jcarousel/

The only snafu I ran into was the prev and next buttons reactivating
playback on their own.  The quickest solution I found was to override
the startAuto() method which is called after each animation to restore
the timer and do a simple check to see if we're in a pause state.

----------

$(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();
    }
  });
});

[Empiror]

Great work Jeremy.  I am using jcarousel in horizontal alignment mode
and I needed a way to pause the auto scrolling when a user hovers over
an item; otherwise clicking on an item could be difficult as the item
could scroll away before having clicked on it.  Based on your code I
was able to do this with the code below:

    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel({
            scroll: 1,
            auto: 2,
            wrap: 'last',
            initCallback: function(jc, state) {
              if (state == 'init') {
                  /* Pause carousel scrolling when a user mouses overs
an item and restart the scrolling when they mouse out.
                   * Written by cormac at finisco dot com 19/2/2009
based on work by Jeremy Mikola:
                   * http://groups.google.com/group/jquery-en/browse_thread/thread/f550b94914d10065
                   */
                jc.startAutoOrig = jc.startAuto;
                jc.startAuto = function() {
                  if (!jc.paused) {
                    jc.startAutoOrig();
                  }
                }
                jc.pause = function() {
                  jc.paused = true;
                  jc.stopAuto();
                };
                jc.play = function() {
                  jc.paused = false;
                  jc.startAuto();
                };
                $('li.jcarousel-item').mouseover(function() {
                    jc.pause();
                });
                $('li.jcarousel-item').mouseout(function() {
                    jc.play();
                });
              }
              jc.play();
            }
        });
    });

[divydovy]

Hi Jeremy,

Great snipped - thanks for sharing.

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.

Cheers,

divydovy

Jeremy Mikola wrote:

I'm using jcarousel (in vertical alignment) for a project and
discovered a need for a button to pause/resume the plugin from auto-
scrolling through its contents.  I was a bit surprised that I wasn't
able to find any previous example of this online; all the more reason
to share, though.  Feedback and criticism is more than welcome.

I was working off of Jan Sorgalla's original documentation:
http://sorgalla.com/projects/jcarousel/

The only snafu I ran into was the prev and next buttons reactivating
playback on their own.  The quickest solution I found was to override
the startAuto() method which is called after each animation to restore
the timer and do a simple check to see if we're in a pause state.

----------

$(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();
    }
  });
});