An Image Carousel

As another example of shuffling around page content, we’ll implement an image gallery for the front page of the bookstore site. The gallery will present a few featured books for sale, with links to larger cover art for each. Unlike the previous example, where the headlines in our news ticker moved on a set schedule, here we’ll use jQuery to slide the images across the screen when the user clicks on a cover.

An alternative mechanism for scrolling through a set of images is implemented by the jCarousel plug-in for jQuery. While not identical to the result we’ll achieve here, this plug-in can produce high-quality shuffling effects with very little code. More information on using plug-ins can be found in Chapter 10.

Setting Up the Page

As always, we begin by crafting the HTML and CSS so that users without JavaScript available receive an appealing and functional representation of the information:

<div id="featured-books">
  <div class="covers">
    <a href="covers...