Mouse over zoom image jquery Example

flipkart_zoom_image

mouse_over_zoom_image_gooegle

 

 

Mouse over zoom image jquery Example:

In online shopping websites, on product image mouse over, it will be zoomed like this,

flipkart_zoom_image

 

 

 

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:

image_zoom_output

 

steve_zoomed_view

 

 

Plugin Official Page:

Elevate Zoom Examples

 

 

Image Lens View:

google_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:

LensView

 

Recommended jQuery Books:

 

Feel free to post your comments/queries…

 

 

 

Leave a Reply