Image Enlargement

Our image gallery is fully functional, with a carousel that allows the user to navigate to a desired image. A click on the center image leads to an enlarged view of the cover in question. But there is more we can do with this image enlargement functionality.

Rather than lead the user to a separate URL when the center image is clicked, we can overlay the enlarged book cover on the page itself. The Thickbox plug-in for jQuery provides a different way to display information overlaid on the page. We will develop the feature without plug-ins here. More information on using plug-ins can be found in Chapter 10.

This larger cover image will require a new image element, which we can create at the same time that the hover images are instantiated:

var $enlargedCover = $('<img/>')
  .addClass('enlarged')
  .hide()
  .appendTo('body');

We will apply a set of style rules to this new class that are similar to the ones we have seen before:

img.enlarged {
  position: absolute;
  z-index...