(^456) ❘ CHAPTER 20 CREATING AN INTERACTIVE SLIDESHOW
This method is used only when the user clicks a control to manually fl ip to a slide. It resets the isIn-
terrupted property to false and then triggers the next transition by calling the transition() method.
The transition() method is used for the normal transition of one slide to the next, repeating display
of all slides on a loop, endlessly.
this.transition = function()
{
If the isInterrupted property is true, the method returns and nothing happens. This means that the
process of interrupting the slideshow has not completed and should not be interfered with.
if (this.isInterrupted)
{
return;
}
Like in the block that handled clicking a slide control, the fi rst thing you do is hide the currently
visible slide with a call to fadeOut(). You can fi nd the slide within the current slideshow by the
class name slide and the :visible pseudo-class.
node.find('.slide:visible')
.fadeOut('slow');
Then, all the
slideshowControlActive.
node.find('ul.slideshowControls li')
.removeClass('slideshowControlActive');
Finally, the new slide is animated with a call to fadeIn(); it is referenced by its collection number
(slideCollection) and its slide number (this.counter).
$('#slide-' + slideCollection + '-' + this.counter).fadeIn(
'slow',
function()
{
When the new slide completes the fadeIn() animation, the current slide’s corresponding
- slideshowControls receives the class name slideshowControlActive.
- element with the current value
of the counter property.
node.find('ul.slideshowControls li').each(
function()
{
if (parseInt($(this).text()) ==
slideshows[slideCollection].counter)
{
$(this).addClass('slideshowControlActive');
}
}
);
[http://www.it-ebooks.info](http://www.it-ebooks.info)
You can fi nd the current control by comparing the text of each