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.

<html>
	<head>
		<title>Image Cropped Zoom Demo</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 		<script type="text/javascript" src="js/jquery.cropZoom-min.js"></script>
		 <script type="text/javascript">
		 	$(document).ready(function(){
				$('.crop-zoom').cropZoom({});
			});
		 </script>
		 <style>
		 	/*you have to set the containers initial height / width in px as it's required */
		 	#productImageDefault{
		 		width: 215px;
				height: 215px;
				border: 1px solid #333;
				}
			div{margin-bottom: 10px;}
		 </style>
	 </head>
	 <body>
	 	<div id="productImageDefault" class="crop-zoom">
	 		<img src="images/mower.jpg" />
	 	</div>
	 </body>
</html>