WebDevKungfu

jQuery Plugin: Crop and Zoom

Jan 25, 2010 Web Dev, jQuery

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 |   copy code | ?
01 
02 <html>
03 	<head>
04 		<title>Image Cropped Zoom Demo</title>
05 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
06  		<script type="text/javascript" src="js/jquery.cropZoom-min.js"></script>
07 		 <script type="text/javascript">
08 		 	$(document).ready(function(){
09 				$('.crop-zoom').cropZoom({});
10 			});
11 		 </script>
12 		 <style>
13 		 	/*you have to set the containers initial height / width in px as it's required */
14 		 	#productImageDefault{
15 		 		width: 215px; 
16 				height: 215px; 
17 				border: 1px solid #333;
18 				}
19 			div{margin-bottom: 10px;}	  
20 		 </style>
21 	 </head>
22 	 <body>
23 	 	<div id="productImageDefault" class="crop-zoom">
24 	 		<img src="images/mower.jpg" />
25 	 	</div>
26 	 </body>
27 </html>
28  
29  
30

This entry was posted on Monday, January 25th, 2010 at 6:30 am and is filed under Web Dev, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “jQuery Plugin: Crop and Zoom”

Ben Nadel Says:

January 25th, 2010 at 8:56 am
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.

Advertise Here

jQuery Plugin: Crop and Zoom

One Response to “jQuery Plugin: Crop and Zoom”

Leave a Reply

Recent Post

Recent Comments

Archives

Twitter

Categories

Recent Posts

Meta

01
02	<html>
03	<head>
04	<title>Image Cropped Zoom Demo</title>
05	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
06	<script type="text/javascript" src="js/jquery.cropZoom-min.js"></script>
07	<script type="text/javascript">
08	$(document).ready(function(){
09	$('.crop-zoom').cropZoom({});
10	});
11	</script>
12	<style>
13	/you have to set the containers initial height / width in px as it's required /
14	#productImageDefault{
15	width: 215px;
16	height: 215px;
17	border: 1px solid #333;
18	}
19	div{margin-bottom: 10px;}
20	</style>
21	</head>
22	<body>
23	<div id="productImageDefault" class="crop-zoom">
24	<img src="images/mower.jpg" />
25	</div>
26	</body>
27	</html>
28
29
30