Jquery Code For Image Zoom - Jquery
How to create a zoom effect over a image in jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Image zoom in jquery is used to enlarge the image by mouseover on the image. The size of little image should be of size 259*194 and larger image should be of size 1024*768.The sample code for image zooming is given below.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
jQuery(document).ready(function($){
$("#innerbox img").hover(function(){
$(this).attr("src","images/huge.jpeg");
$("#innerbox img").removeClass('newimg');
$('#innerbox').mousemove(function(e){
var offset = $(this).offset();
var xPos = e.pageX - offset.left;
var yPos = e.pageY - offset.top;
var mouseXPercent = Math.round(xPos / $(this).width() * 100);
var mouseYPercent = Math.round(yPos / $(this).height() * 100);
$(this).children('img').each(
function(){
var newX = $('#innerbox').width() - $(this).width();
var newY = $('#innerbox').height() - $(this).height();
var myX = newX * (mouseXPercent / 100); //) / 100) / 2;
var myY = newY * (mouseYPercent / 100);
var cssObj = {
'left': myX 'px',
'top': myY 'px'
}
$(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'});
});
});
},function(){
$(this).attr("src","images/little.jpg");
if ($(this).attr("src","images/little.jpg"))
{
$("#innerbox img").addClass('newimg');
}
});
});
</script>
<style>
#innerbox {
height:200px;width:250px;
margin: auto;margin-top: 2em;
overflow: hidden;position: relative;
border: 4px solid #666;z-index:99;
cursor:crosshair;
}
#innerbox img {
border: 4px solid #666;position: relative;
top: 0;left: 0;
}
.newimg{position: relative;top: 0 !important;left: 0 !important;}
</style>
<div id="innerbox">
<img src="images/little.jpg"/>
</div>
