Cycle Pager auto advance with Pause/Play

Question

hi guys

i've managed to work out who to make a pager gallery using the cycle plugin WITH auto advance

$(function() {
$('#s4').before('<div id="nav" class="nav">').cycle({
    fx:     'fade',
    speed:  'slow',
    timeout: 6000,
    pager:  '#nav',
    before: function() { if (window.console) console.log(this.src); }
});

});

however as this takes away some control from the user so it's be great to add a play/pause button like this (prefereably one button) play pause buttons here

i've hit a brick wall as my javaScript coding is weak and i'm not sure if you can do this with a pager

can you help?

thanks

Answer 1

Try this:

var slides = $('#s4').before('<div id="nav" class="nav"><button id="play_pause" class="pause">Pause</button></nav>')
.cycle({
    fx:     'fade',
    speed:  'slow',
    timeout: 6000,
    pager:  '#nav',
    before: function() { if (window.console) console.log(this.src); }
});    

$('#pauseButton').click(function() {
    var obj = $(this);
    if (obj.hasClass('pause')) {
        obj.removeClass('pause').addClass('play').text('Play');
        slides.cycle('pause'); 
    } else if (obj.hasClass('play')) {
        obj.removeClass('play').addClass('pause').text('Pause');
        slides.cycle('resume');
    }
});