thumb_jquery_default

jQuery Plugin: Crop and Zoom

On 01.25.10, In Web Dev, jQuery, by Justin Johnson

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