Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Overview of this book

Table of Contents (18 chapters)
Learning jQuery
Credits
About the Authors
About the Reviewers
Preface

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...