Creating a Slideshow (^) ❘ 455
);
if (resetCounter)
{
counter = 1;
}The value of the counter variable is moved to the counter property so that the slideshow can con-
tinue to function properly when it resumes automatically.
slideshows[slideCollection].counter = counter;Then the slide the user clicked is faded in with an animation. The slide is referenced by its collection
number and its slide number.
$('#slide-' + slideCollection + '-' + slideInCollection)
.fadeIn(
'slow',
function()
{The slideshowControlActive class name is added to the li variable holding a reference to the current
li.addClass('slideshowControlActive');Now that the animation has completed, the transitioning property is set to false to indicate that
there is no animation taking place right now.
slideshows[slideCollection].transitioning = false;Because the animation has completed, the next step is to resume the timer. A call to setTimeout()
triggers a slideshow transition to occur automatically after 5 seconds, as though the slideshow had
never been interrupted. The next slide transition occurs after an additional 5 seconds.
slideshows[slideCollection].resumeTimer = setTimeout(
'slideshows[' + slideCollection + '].resume();',
5000
);
}
);
}
}
);The next block of code is an API method. It resumes the slideshow if the slideshow has been
interrupted.
this.resume = function()
{
this.isInterrupted = false;
this.transition();
};