Sometimes, we include a small image to maintain a nice layout and fit more content on the screen, but our site visitors might want to see a larger image to see more details. One way of handling this is showing the full-size image in a lightbox, like we did in Chapter 5, Showing Content in Lightboxes. However, another option we have is to zoom in on the image right where it is. Our site visitor can move their mouse to move around the image to see the details. On touch screens, they can use their finger to drag over the image and zoom in.

To accomplish this, we'll use the jQuery Zoom plugin by Jack Moore. You might recognize Jack Moore's name; he is also the author of the Colorbox plugin we used in Chapter 5, Showing Content in Lightboxes.