Summary (^) ❘ 457
The counter property is incremented by 1 to prepare for the next slide.
slideshows[slideCollection].counter++;
If the counter property’s new value is greater than the total number of slides, it is reset to 1 so
that the counter property goes from referencing the last slide to the fi rst slide, when the last slide
is displayed.
var resetCounter = (
slideshows[slideCollection].counter >
node.find('ul.slideshowControls li').length
);
if (resetCounter)
{
slideshows[slideCollection].counter = 1;
}
A new timer is created that runs from this transition to the next one.
setTimeout(
'slideshows[' + slideCollection + '].transition();',
5000
);
}
);
};
A call to this.transition(); starts the slideshow running:
this.transition();
Finally, at the end of the script, a ready event fi res when the DOM is ready. It checks to see whether
there are any items with the class name slideshow; if there are, the $.slideshow() jQuery plugin
method is called on each of those elements.
$(document).ready(
function()
{
if ($('.slideshow').length)
{
$('.slideshow').slideshow();
}
}
);
Summary
In this chapter you learned how to create and use a plugin for creating interactive slideshows, like
those used to display advertising on many websites’ homepages. The plugin that you created can
handle one or more distinct slideshows within a document, each with two or more slides. Using a
prototype style of programming, you can create distinct objects for each slideshow, each with their
own properties and states of being.