Adding a pause function to my gallery

Ok, so I have a very simple gallery right now. It has a next and previous working buttons, and I have it loop every couple seconds. The only problem I have is that when I click next or previous it doesn’t continue the loop after I hit next again.

Here are the two snippets of code.

[code]
$(‘#slideshow .arrow’).click(function(){
var li = slides.eq(current),
canvas = li.find(‘canvas’),
nextIndex = 0;

// Depending on whether this is the next or previous
// arrow, calculate the index of the next slide accordingly.

if($(this).hasClass(‘next’)){
nextIndex = current >= slides.length-1 ? 0 : current+1;
}
if($(this).hasClass(‘previous’)){
nextIndex = current <= 0 ? slides.length-1 : current-1;
}
[/code]

and

[code]

$(window).load(function(){

// The window.load event guarantees that
// all the images are loaded before the
// auto-advance begins.

var timeOut = null;

$(‘#slideshow .arrow’).click(function(e,simulated){

// The simulated parameter is set by the
// trigger method.

if(!simulated){

// A real click occured. Cancel the
// auto advance animation.

clearTimeout(timeOut);
}
});

(function autoAdvance(){

// Simulating a click on the next arrow.
$(‘#slideshow .next’).trigger(‘click’,[true]);

// Schedulling a time out in 5 seconds.
timeOut = setTimeout(autoAdvance,1000);

})();

});
[/code]

I’ve been trying to figure this out without posting on the forums, but I am stumped.

Thanks for the help

This is the tutorial I followed.

[url]http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/[/url]

Also in #JavaScript _↴