Introduction:
Here I will explain how to use jQuery inner zoom plugin to zoom an image inside of div on mouse hover like e-commerce websites or enlarge image in inside of div on mouseover using jQuery image Zoom plugin. jQuery image Zoom plugin will provide two features image zoom effect and lightbox effect for the images by setting few properties for our images.
Description:
In previous posts I explained jQuery Zoom an image on mouseover, jQuery Bind Images to Dropdown, jQuery show gridview images with lightbox effect, jQuery fancy zoom effect for image, jQuery scrollable div with fixed header and many articles relating to JQuery. Now I will explain how to zoom an image inside of div on mouse hover like e-commerce.
In previous posts I explained jQuery Zoom an image on mouseover, jQuery Bind Images to Dropdown, jQuery show gridview images with lightbox effect, jQuery fancy zoom effect for image, jQuery scrollable div with fixed header and many articles relating to JQuery. Now I will explain how to zoom an image inside of div on mouse hover like e-commerce.
Before
using this plugin remember that you need to create two or three sets of different
dimension images based on your requirements and place it in your application
like as shown below images dimensions
a. Thumbnail - 100 x 67 pixels
b. Small - 411 x 274 pixels
c. Large - 1280 x 854 pixels
By
using jQuery inner Zoom plugin we
need to write few lines of code like as shown below to set inner zoom effect
for image on mousover
<script type="text/javascript">
$(function()
{
$("#img1").elevateZoom({
zoomType:"inner",
cursor:"crosshair"
});
});
</script>
|
if
you want to see it in complete example need to write the code like as shown
below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Zoom Image on Mouse Hover</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="js/jquery.elevatezoom.min.js"
type="text/javascript"></script>
</head>
<body>
<div>
<img id="img1"
src="images/small/image1.png"
data-zoom-image="images/large/image1.jpg"/>
</div>
<script type="text/javascript">
$(function()
{
$("#img1").elevateZoom({
zoomType:"inner",
cursor:"crosshair"
});
});
</script>
</body>
</html>
|
In
header section I added jquery.elevatezoom.min.js plugin this you can
get it from attached downloadable folder or for this link Elevate
jQuery Image Zoom Effect and I used two set of different
dimension images small, large images.
Demo
 |
Download
Sample Code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
5 comments :
Sir How to apply jquery this zoom effect on dynamically retrive image from sql .. using datalist control...
i am getting error, Attribute 'data-zoom-image' is not a valid attribute of element 'img'
perfectly nice, thanks
i am getting error, Attribute 'data-zoom-image' is not a valid attribute of element 'img'
Note: Only a member of this blog may post a comment.