Introduction
This article is about to
explain how to create Image zoom in ASP.Net using Jquery and Elevate plug-in.
Requirement
1. Download
Elevate plug-in
Code
Write the below code in to
your page :
<%@
Page
Language="VB"
AutoEventWireup="false"
CodeFile="Default.aspx.vb"
Inherits="_Default"
%>
<!DOCTYPE
html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image
zoom</title>
<script
src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script
src='jquery.elevateZoom-2.5.3.min.js'></script></head>
<%--<script
src='jquery.fancybox.js'></script>--%>
<body>
<div>
<asp:Image
ID="Image1"
runat="server"
ImageUrl="small/image_1.jpg"
data-zoom-image="large/image_1.jpg"/>
</div>
<script>
$("#
Image1").elevateZoom({
gallery:
'gallery_01',
cursor:
'pointer',
galleryActiveClass:
'active'
});
//pass the images to Fancybox
$("#
Image1").bind("click",
function
(e) {
var
ez = $('#
Image1).data('elevateZoom');
return
false;
});
</script>
</body>
</html>
Save all and run view the
page in browser it ll work perfectly.