Image zoom in ASP.Net using Jquery and Elevate plug-in

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

Comments

Post a Comment