Introduction:
Here I will explain how to zoom an image on mouse hover using jQuery image Zoom plugin like e-commerce websites or enlarge image 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 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 on mouse hover using jQuery image Zoom plugin like e-commerce websites.
In previous posts I explained 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 on mouse hover using jQuery image Zoom plugin like e-commerce websites.
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 image Zoom plugin we
need to write the few lines of code like as shown below to set zoom effect for
image on mousover
<img id="img1"
src="small/image1.png"
data-zoom-image="large/image1.jpg"/>
<script type="text/javascript">
$(function()
{
$("#img1").elevateZoom();
});
</script>
|
Basic Example
<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();
});
</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
 |
Here
I am going to explain another example with zoom and lightbox effect for that we
need to write the code
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Zoom Image on Mouse Hover using jQuery Image Zoom
Plugin</title>
<link href="jQuery.fancybox.css" rel="stylesheet" type="text/css" />
<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>
<script src="js/jquery.fancybox.pack.js"
type="text/javascript"></script>
<style type="text/css">
#gallery_01 img{border:2px solid white;width: 96px;}
.active img{border:2px solid #333 !important;}
</style>
</head>
<body>
<div>
<img id="img1"
src="images/small/image1.png"
data-zoom-image="images/large/image1.jpg"
/>
<div id="gallery_01">
<a href="#" class="active"
data-image="images/small/image1.png"
data-zoom-image="images/large/image1.jpg">
<img src="images/small/image1.png" /></a>
<a href="#" data-image="images/small/image2.png"
data-zoom-image="images/large/image2.jpg">
<img src="images/small/image2.png"
/></a>
<a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg">
<img src="images/small/image3.png"
/></a>
<a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg">
<img src="images/small/image4.png"
/></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#img1").elevateZoom({
gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: "active" });
$("#img1").bind("click", function(e)
{
var ez = $('#img1').data('elevateZoom');
ez.closeAll();
$.fancybox(ez.getGalleryList());
return false;
});
});
</script>
</body>
</html>
|
In
header section I added jquery.elevatezoom.min.js, jquery.fancybox.pack.js plugins these you
can get it from attached downloadable folder or from these links Elevate
jQuery Image Zoom Effect , fancybox jQuery plugin and I used three set of different
dimension images thumb, 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
|
|||
20 comments :
can you please let me know how to display the textbox on image while hovering mouse tip.
actually it is for entering the image name like google maps
good suresh
Hello, my the best jquery image zoom plugin http://zoomsl.tw1.ru
Helpful example.
Now i want to hide the bigger image and Lens on the close button, is there any property in the plugin?
or
$(controlName).remove();
would be suitable to use here.
I am fetching my data from database and getting it loaded into formview.
But on mouse over, I am just getting that fancy box. but my image zoom is not there. i tried to use class instead of id. It still didn't work.
On Clicking the image I get enlarged image anywhere on my website.
That is looking very ugly.
Please help
thanks
hi sir,
This example was not support for xhtml 1.0
i got this error "data-zoom-image not permitted"
nice script :) thanks for sharing
SURESH DASARI , Thank you for sharing :)
Nice example but when i implement in my demo its not zooming working properly..
Sir, I want to write this image url in page load and then Zoom that Image on Mouseover... please tell me the process...
But its not working in content page in asp.net....any help?
Sir Really U Are Best your code help me always ....
thanks a lot
i want to use this plugin in Data list control
using asp image contorl so how would i can use it in my application please suggest me
it will be blessing for me
thanks
sarveshboden.pathak@gmail.com
Its not working for me.... Showing me the error like...
Attribute 'data-zoom-image' is not a valid attribute of element 'img'.
can it be done by image url stored in database and image on folder
nice.. but i want to take only one image.. dont want to take small and big images
Please share the way to implement for single product coming from database. I need to implement it for shopping website. Please share it the way using database, instead for a static mentioned images.
Hello sir,
can u please help how to do this in asp gridview?
not zooming bhai
Note: Only a member of this blog may post a comment.