I recently had the need to, on a product detail page for example, be able to click on an image and zoom in to see it in more detail. Now this could easily be done in Flash with a little bit of XML or some Flash Vars, but the problem was that this was on [...]
I recently had the need to, on a product detail page for example, be able to click on an image and zoom in to see it in more detail. Now this could easily be done in Flash with a little bit of XML or some Flash Vars, but the problem was that this was on a preexisting site with thousands of products. So, I decided to see what I could whip up with jQuery.
Please note that I was inspired by Ben Nadel’s recent post about creating this effect. Ben, I used some of your code for the zooming function and wrapped it in to this plugin. So credit goes to Ben Nadel for figuring out that math.
Ben’s original post: http://www.bennadel.com/blog/1823-Creating-An-Image-Zoom-And-Clip-Effect-With-jQuery.htm
Ben’s follow up post, which adds in some ColdFusion to serve a higher res image on zoom: http://www.bennadel.com/blog/1824-Creating-An-Image-Zoom-And-Clip-Effect-With-jQuery-And-ColdFusion.htm
*Note, Ben’s example uses the $.data method of jQuery and passes it an object of key/values. Versions of jQuery prior to 1.4 do NOT support this so I have re-written that chunk to support versions of jQuery prior to 1.4 (aka: 1.4 is NOT required for this plugin)
Download the plugin from GitHub: http://github.com/systemseven/jQuery-Plugins/tree/master/crop-and-zoom/
How to Use:
Usage is fairly straight forward and this code is taken from the example that I provide in the GitHub repository.
Image Cropped Zoom Demo
2 Responses
I think jQuery 1.4 was also the first to introduce the retrieval of all data() values by calling the data() method with no argument; that was such a great improvement.
Really nice packaging! I’m glad I would help out in some way.
Can also be done with jQuery AJAX-ZOOM Plugin easily :: http://www.ajax-zoom.com