Web Development with jQuery

Chapter 20Creating 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 finishes, 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 ...