Question

How might I make the Cycle plugin automatically play once through and then stop at the end of the slideshow? Additionally, Id like to have a pause/play navigation button fade in that can be used to restart it once again by the user.

Is this possible?

EDIT 1

Here is what I tried, but the slideshow still continued…

$(document).ready(function() {
    $('#gallery').cycle({
        fx: 'fade',
        timeout: 3000, 
        speed: 500,
        autostop: 0,
        end: function(options) {  
               $('#gallery').cycle('stop');
                }
    });
});

EDIT 2

I now currently have the slideshow successfully ending on the last slide, however I believe by using these particular parameters it may be causing problems with the play/pause toggle feature that is available to the plugin…

What happens is, the pause/play button does function, however once the slideshow is completely over it no longer does anything and will not allow the slideshow to start over.

Here is what I currently have scripted out:

$(document).ready(function() {
    $('#gallery').cycle({
        fx: 'fade',
        timeout: 3000, 
        speed: 500,
        autostop: 1 // Stop slideshow at end
    });

    $('a#pause_resume_button').click(function() { 
        $('#gallery').cycle('toggle'); 
    });
});

Answer 1

There is an end option.

http://jquery.malsup.com/cycle/options.html

Pair this with stop and you’re sorted.

If you know the number of slides then you could also use autoStop.

EDIT:

$('#scroller').cycle({
        fx: 'fade',
        timeout: 3000, 
        speed: 500,
        autostop: 1,
        end: function(options) {  
          $('#gallery').cycle('stop');
          alert('finished');
        }
    });

http://jsbin.com/icohen/1/

EDIT 2:

http://jsbin.com/icohen/2/edit