Creating an Interactive
Slideshow
Slideshows are a common sight on homepages today. Typically, you have three or more panels
set to transition automatically between the slides, one after another. When the slideshow
fi nishes, it starts over again. These slideshows are typically used for marketing, displaying
multiple banners.In this chapter you learn how to use a slideshow plugin that I wrote for my open source PHP
framework, Hot Toddy. It has no options but is a demonstration of how to create a reusable
jQuery plugin that can accommodate multiple instances of the plugin on a single page.Creating a Slideshow
In this section, you learn both how to create a slideshow using a plugin and how to code the
plugin itself. The plugin that I’ve created provides only a fade transition between slides. Your
goal in this chapter is to understand how the plugin works well enough to modify it to suit
your needs, which should include how to use a different animation.The principle of the slideshow is simple: Provide two or more frames that can transition
between one another. The number of slides is variable; you can include as few or as many as
you like, and the plugin automatically numbers them and transitions between them.This plugin is designed to accommodate the possibility of multiple slideshows on the
same page; each slideshow is called a collection. The code is designed to instantiate a new
instance of the slideshow object for each collection so that they can operate independently of
one another.Use the following example (Example 20-1 in the source code download materials at http://www.wrox.
com/go/webdevwithjquery) to start creating a slideshow: