Mouse over zoom image jquery Example
Mouse over zoom image jquery Example:
In online shopping websites, on product image mouse over, it will be zoomed like this,
This can be achieved using the opensource jquery elevateZoom plugin.
Plugins Required:
1. jQuery Plugin [jquery-1.8.3.min.js]
2. elevateZoom Plugin [jquery.elevateZoom-3.0.8.min.js]
Image Zoom – Sample Code:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Image Zoom</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.elevateZoom-3.0.8.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(‘#myimage’).mouseover(function () {
$(‘#myimage1′).elevateZoom({tint:true, tintColour:’#F90’, tintOpacity:0.5});
$(‘#myimage’).elevateZoom();
});
});
</script>
</head>
<body>
<img id="myimage1" src="images/google.png" data-zoom-image="images/google_large.png" height="200px" width="950px;"/>
<img id="myimage" src="images/steve.jpg" data-zoom-image="images/steve_large.jpg" height="200px;" width="400px;"/>
</body>
</html>
[/html]
Output:
Plugin Official Page:
Image Lens View:
Image Lens view – Source Code:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Image Zoom</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.elevateZoom-3.0.8.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(‘#myimage1′).mouseover(function () {
/*’zoomed’ is an indicator to determine zoom applied or not */
if($(this).hasClass(‘zoomed’)){
$(this).elevateZoom({
zoomEnabled: false
});
$(this).removeClass(‘zoomed’);
}else{
$(this).elevateZoom({
zoomType: "lens",
lensShape: "round",
lensSize: 500
});
$(this).addClass(‘zoomed’);
}
});
});
</script>
</head>
<body>
<img id="myimage1" src="images/google.png" data-zoom-image="images/google_large.png" height="200px" width="950px;" style="margin-top:150px;"/>
</body>
</html>
[/html]
Download LensView Source code:
Recommended jQuery Books:
Feel free to post your comments/queries…