Image Zoom Effect With jQuery

Today we will create simple image zoom effect using jQuery. Actually i wrote this code for one of my client site jakas.in. I have converted code into jquery plugin so that we can easily share and add to your sites.
Read: Create Your Own JQuery Plugin tutorial to learn how to create jquery plug-in for absolute beginners. Image Zoom Effect With jQuery


demo

download

Lets will create.
-index.html -imageZoom.js

index.html

<html>  
<head>  
<script src="jquery.min.js"></script>  
<script src="imageZoom.js"></script>  
</head>  
<body>  
<div class="imgholder">  
<img src="img/img1.jpg" alt="img1" width="100%" height="100%">  
</div>  
<div class="imgholder">  
<img src="img/img2.jpg" alt="img12" width="100%" height="100%">  
</div>  
<body>  
</html> 

imageZoom.js

(function($){ 
//imgZoom plug in starts here 
$.fn.imgZoom=function(options){ 
var s= $.extend( {  
zoom: 25,  
speed: 300  
}, options); 

return this.each(function(){  
//getting current image 
var img = $(this);  
//load function trigger when image load compleate 
img.load(function() {  
//current width and height of the image 
var w=img.width();  
var h=img.height();  
//on image hover event 
img.hover(function(){  
//incrasing image height and width. 
img.stop().animate({  
height: h + s.zoom,  
width:w+s.zoom,  
overflow:"hidden",  
marginLeft: -(s.zoom/2),  
marginTop: -(s.zoom / 2)  
}, s.speed,'linear'); 
},function(){ 
img.stop().animate({  
height: h,  
width:w,  
marginLeft: 0,  
marginTop: 0  
}, s.speed,'linear'); 
}); 
}); 
}); 
}; 
})(jQuery); 

The plugin code is straight forward.
-After image load in the page we get the height and width of the image. -when image hovered increasing image height and width with jquery's animate function. -When unhover changing the height and width back to normal height and width. Note: It's very important to use jQuery.load() function on images. Because DOM load and other resource like script and image load are different in any browsers. So Note this post it may help in feature.

CSS

<style>  
.imgholder{ 
float: left;  
width: 220px;  
height: 318px;  
border: none;  
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px;  
box-shadow: 0px 0px 2px #999999;  
overflow: hidden;  
padding: 0px;  
margin-left: 30px;  
} 
</style> 

Add this code to head section of index.html.

Calling the plugin

Now we need to call your plug in inside index.html to apply it on all image on that page.

<script>  
$(function(){ 
//simple one 
$('img').imgZoom(); 
//if you want to change setting 
var mysettings={  
zoom: 55,  
speed: 500  
}; 
$('img').imgZoom(mysettings); 
}); 
</script> 

Add this code any where on index.html page.
It's done now open index.html page in any of your favorite browsers.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.