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 Inner Zoom Image Inside of DIV on MouseOver using jQuery Image Zoom Plugin

Apr 9, 2013
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 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 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






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

5 comments :

Pathan Yunus said...

Sir How to apply jquery this zoom effect on dynamically retrive image from sql .. using datalist control...

Rohan Leuva said...

i am getting error, Attribute 'data-zoom-image' is not a valid attribute of element 'img'

Abdo Elalfey said...
This comment has been removed by the author.
Irtekaz Ahmed Khan said...

perfectly nice, thanks

Anonymous said...

i am getting error, Attribute 'data-zoom-image' is not a valid attribute of element 'img'

Give your Valuable Comments

Other Related Posts

© 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.