jQuery Cycle Plugin (with replay)

I really like the jQuery Cycle plugin for slideshows. It’s easy, it’s jQuery, it works, and it looks good! However, when I setup a slideshow, I want it to play through once and offer a replay button (typically the last slide). With the built in features, this seemed a little difficult to accomplish – but maybe that’s just because I’m no jQuery expert and I just didn’t get it….

But whatever the reasoning, I finally found a way to accomplish what I wanted, here it is:

<script type="text/javascript">
$(function() { $('#slides').cycle({
    timeout: 6000,
    speed:  2500,
    delay: -2000,
    autostop: 1,
    end: function() {
        $('#replay').click(function () {
                $('#slides').cycle({
                            timeout: 6000,
                            speed:  2500,
                            delay: -2000,
                            autostop: 1
                });//end #slides
        });//end #replay
        }//end end

}); });
</script>

Of course, you’ll need to include jQuery and the cycle plugin in the head, this is just the parameters portion.

Script assumes your slide container has ID of ‘slides’ and that the last element has an ID of ‘replay.’

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: