Adding photo zoom
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.
Getting ready
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.
How to do it…
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 ...
Get jQuery 2.0 Development Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
