Photo zoom is a great effect that can be used in many interfaces to add extra user interaction to a photo gallery or product page so that the user can see smaller images clearly. This recipe will show you how to add the photo zoom effect to four images in a list.
You are going to need four images to use in this recipe. Make sure they are fewer than 800 px wide and 600 px high. Once you have collected the four images that will be used in this recipe, create recipe-2.html, recipe-2.css, and recipe-2.js in the same directory as these images and the jQuery library.
Perform the following instructions to add the zoom effect to your chosen images:
Add the following HTML code to
recipe-2.html; ensure that you update the image references that correspond to the images you have chosen:<!DOCTYPE html> <html> <head> <title>Chapter 7 :: Recipe 2</title> <link href="recipe-2.css" rel="stylesheet" type="text/css" /> <...