This article is about to explain how to create functionality to zoom an image in ASP.Net using Jquery and Elevate plug-in.
Requirement
Code
Write the below code in to your page. This is a Web application developed using VB.NET. Same code can be applied to a C# application as well.
- <%@ 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' });
-
- $("# Image1").bind("click", function (e) {
- var ez = $('# Image1).data('elevateZoom');
- return false;
- });
- </script>
- </body>
- </html>
Save all and run, view the page in a browser.