jQuery in Action
206
CHAPTER 7
Extending jQuery with custom plugins
The opacity levels applied to the fields in either state are hard-coded into
the function. This is hardly caller-friendly. Modify the method to allow the
levels to be caller-supplied.
the function. This is hardly caller-friendly. Modify the method to allow the
levels to be caller-supplied.
Oh heck, why force the page author to accept only the ability to affect
opacity? How would you modify the method to allow the page author to
determine what the renditions for the fields should be in either state?
opacity? How would you modify the method to allow the page author to
determine what the renditions for the fields should be in either state?
Now let's take on an even more complex plugin.
7.4.2 Retaining state within a wrapper method
Everybody loves a slideshow!
At least on the web. Unlike hapless after-dinner guests forced to sit through a
mind-numbingly endless display of badly focused vacation photos, visitors to a
web slideshow can leave whenever they like without hurting anyone's feelings!
web slideshow can leave whenever they like without hurting anyone's feelings!
For our more complex plugin example, we're going to develop a jQuery com-
mand that will easily allow a page author to whip up a quick slideshow page. We'll
create a jQuery plugin, which we'll name the Photomatic, and then we'll whip up a
test page to put it through its paces. When complete, this test page will appear as
shown in figure 7.2.
create a jQuery plugin, which we'll name the Photomatic, and then we'll whip up a
test page to put it through its paces. When complete, this test page will appear as
shown in figure 7.2.
This page sports the following components:
A set of thumbnail images
A full-sized photo of one of the images available in the thumbnail list
A set of buttons to move through the slideshow
The behaviors of the page are as follows:
Clicking any thumbnail displays the corresponding full-sized image.
Clicking the full-sized image displays the next image.
Clicking any button performs the following operations:
First--Displays the first image
Previous--Displays the previous image
Next--Displays the next image
Last--Displays the last image
Any operation that moves off the end of the list of images wraps back to
the other end; clicking Next while on the last image displays the first
image and vice versa.
the other end; clicking Next while on the last image displays the first
image and vice versa.
We also want to grant the page authors as much freedom for layout and styling as
possible; we'll define our plugin so that the page authors can set up the elements
possible; we'll define our plugin so that the page authors can set up the elements