Post
Ask Question

Zoom Images In ASP.NET Using Jquery And Elevate Plug-in

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.
  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <title>Image zoom</title>  
  6. <script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>  
  7. <script src='jquery.elevateZoom-2.5.3.min.js'></script></head>  
  8. <%--<script src='jquery.fancybox.js'></script>--%>  
  9. <body>  
  10. <div>  
  11. <asp:Image ID="Image1" runat="server" ImageUrl="small/image_1.jpg" data-zoom-image="large/image_1.jpg"/>  
  12. </div>  
  13. <script>  
  14. $("# Image1").elevateZoom({ gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: 'active' });  
  15. //pass the images to Fancybox  
  16. $("# Image1").bind("click", function (e) {  
  17. var ez = $('# Image1).data('elevateZoom');  
  18. return false;  
  19. });  
  20. </script>  
  21. </body>  
  22. </html>  
Save all and run, view the page in a browser.