Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Zoom Image on Mouseover using jQuery Image Zoom Plugin Example

Apr 8, 2013
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 effectjQuery 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


For more details about this plugin check this site Elevate jQuery Image Zoom Effect

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 RSS subscribe by email Subscribe by Email

20 comments :

satya said...

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

Murali Krishna.S said...

good suresh

Anonymous said...

Hello, my the best jquery image zoom plugin http://zoomsl.tw1.ru

Anonymous said...

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.

Anonymous said...

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

Anonymous said...

thanks

Anonymous said...

hi sir,

This example was not support for xhtml 1.0
i got this error "data-zoom-image not permitted"

karthik said...

nice script :) thanks for sharing

Anonymous said...

SURESH DASARI , Thank you for sharing :)

Anonymous said...

Nice example but when i implement in my demo its not zooming working properly..

Anonymous said...

Sir, I want to write this image url in page load and then Zoom that Image on Mouseover... please tell me the process...

Alok said...

But its not working in content page in asp.net....any help?

Er. Saurabh Kashyap said...

Sir Really U Are Best your code help me always ....

thanks a lot

Sarvesh said...

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

Unknown said...

Its not working for me.... Showing me the error like...

Attribute 'data-zoom-image' is not a valid attribute of element 'img'.

Unknown said...

can it be done by image url stored in database and image on folder

Anonymous said...

nice.. but i want to take only one image.. dont want to take small and big images

Unknown said...

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.

Anonymous said...

Hello sir,
can u please help how to do this in asp gridview?

Unknown said...

not zooming bhai

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.