jQuery in Action
Adding new wrapper methods
209
photoElement: '#photo',
previousControl: '#previousButton',
nextControl: '#nextButton',
firstControl: '#firstButton',
lastControl: '#lastButton'
});
});
</script>
</head>
<body>
<h1>Photomatic Tester</h1>
<div id="thumbnails">
<img src="thumbnails/IMG_0340.jpg"/>
<img src="thumbnails/IMG_0939.jpg"/>
<img src="thumbnails/IMG_1520.jpg"/>
<img src="thumbnails/IMG_1904.jpg"/>
<img src="thumbnails/IMG_2063.jpg"/>
<img src="thumbnails/IMG_2186.jpg"/>
</div>
<div id="photoContainer">
<img id="photo" src=""/>
</div>
<div id="buttonBar">
<button type="button" id="firstButton">First</button>
<button type="button" id="previousButton">Previous</button>
<button type="button" id="nextButton">Next</button>
<button type="button" id="lastButton">Last</button>
</div>
</body>
</html>
If that looks simpler that you thought it would, you shouldn't be surprised at this
point. By applying the principles of Unobtrusive JavaScript and by keeping all
style information in an external style sheet, our markup is tidy and simple. In
fact, even the on-page script has a tiny footprint, consisting of a single statement
that invokes our plugin
point. By applying the principles of Unobtrusive JavaScript and by keeping all
style information in an external style sheet, our markup is tidy and simple. In
fact, even the on-page script has a tiny footprint, consisting of a single statement
that invokes our plugin
b
.
The
HTML
markup consists of a container that holds the thumbnail images
c
, an image element (initially sourceless) to hold the full-sized photo
d
, and a
collection of buttons
e
that will control the slideshow. Everything else is handled
by our new plugin.
Let's develop that now.
To start, let's set out a skeleton (we'll fill in the details as we go along). Our
To start, let's set out a skeleton (we'll fill in the details as we go along). Our
starting point should look rather familiar by now because it follows the same pat-
terns we've been using so far.
terns we've been using so far.
Contains
thumbnail images
thumbnail images
c
Defines the
image element
for full-sized
photos
image element
for full-sized
photos
d
Contains elements to
serve as controls
serve as controls
e