[jQuery] Howto: Adding a pause button to jcarousel
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();
}
});
});