(^450) ❘ CHAPTER 20 CREATING AN INTERACTIVE SLIDESHOW
FIGURE 20-1
The HTML in this example is designed to allow the author to specify as little as possible about the
slideshow. The number of slides is automatically calculated from the plugin, and they are transi-
tioned in the order that they appear in the document. Because each slide is a <div> element, you can
have any HTML you like within each slide, including text for a marketing message. The slideshow
controls are also automatically generated by the plugin.The remainder of this chapter examines the JavaScript in this example in detail, explaining how
each bit comes together to create the larger plugin.You begin with a simple global variable declaration.
var slideshows = [];This variable, slideshows, contains each instance of a slideshow object that has been created, mak-
ing it possible to have as many slideshows as you like within the same DOM.The next section of code creates a jQuery plugin called $.slideshow(). Unlike most of the jQuery
plugins you’ve seen so far, this plugin has no option parameters. You could add options for paus-
ing a slideshow, destroying a slideshow, and so on—whatever confi gurable parameters you want to
add. Doing so would be a simple matter of adding optional arguments for the jQuery $.slideshow()
method, and then deciding how those arguments should act upon the correct corresponding
slideshow() object that gets instantiated for each instance of a slideshow on the page.$.fn.extend({
slideshow : function()
{
return this.each(
function()
{
var node = $(this);if (typeof node.data('slideshow') === 'undefined')
{