Introduction:
This article is about to explain how to create Image zoom in
ASP.Net using Jquery and Elevate plug-in.
Requirement:
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.
Thanks
Neha Sharma
Good one.. Try to put more description's or explanations about the function's etc.. you are improving your articles.. keep posting. And also, I liked your web site theme, very different, sound and loud..
ReplyDeleteSuthish Nair
http://www.ssnair.net
Thanks a lot to place your nice and kind words here it ll be my pleasure to make some changes or modify my way of article writing...
ReplyDeleteThanks.
how can use it in c#?
ReplyDeleteHi azadeh,
ReplyDeleteYou need to write this code in aspx(source code)not in c# or not in vb.it ll work for both.
How to dynamically give the data-zoom-image in a datalist? This will really help if clarified.
ReplyDeleteIts not working when used in content page can u please explain this using content page
ReplyDeleteHow to dynamically give the data-zoom-image please reply me
ReplyDeleteHow to dynamically give the data-zoom-image ?
ReplyDeletei think it is not possible , but if any one have good knowledge then just reply me
its not working with content please reply
ReplyDelete