How to Create Zoom effect using evevatezomm in asp.net

How to Create Zoom effect using evevatezomm in asp.net

11:40:00 PM

Description:-

In this article we will see zooming effect using elevate zoom in images. Here I have created sample demo to create zooming effect in images. Using elevate zoom we have to use jquery to perform zooming effect in images. Using “jquery-1.8.3.min.js” and “jquery.elevatezoom.js” we can create it.

There are many more zooming effect in elevate zoom to create in images. We can set different ZoomType, cursor to display on images, on more property of elevate zoom ZoomwindowFadeIn or ZoomWindowFadeOut using this property to set zooming level on images. Here is the sample code to create Zooming effect on images.

Here I have Set Script for Zoom using elevate Zoom function.

HTML Code:

umesh
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ElevateZoom.aspx.cs" Inherits="GridWebApplicationNew.ElevateZoom" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>jQuery elevateZoom Demo</title>
    <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.elevatezoom.js" type="text/javascript"></script>
</head>
<body>
    <h1>
        Basic Zoom Example</h1>
    <img id="zoom_01" src="samples/water1.png" data-zoom-image="samples/water.jpg" />
    <script type="text/javascript">
        $('#zoom_01').elevateZoom({
            zoomType: "inner",
            cursor: "crosshair",
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750
        });
</script>
</body>
</html>



Umesh Patel

Related Posts

Next
« Prev Post
Previous
Next Post »

Thanks for comments.....