LensZoom in elevateZoom – Jquery Zoom in Plugin for ASP.Net

Introduction:

This is a continuation to the article which I published on the elevateXoom Plugin. In this article I am going to explain one major feature of elevateZoom plugin called LensZoom.

elevateZoom Plugin :

elevateXoom is a Jquery plugin which will xoom the image in a detail preview on mouse hover. In this example I will show to how to implement eleavteZoom plugin in Asp.Net.

Prerequisite’s:

You need to add the necessary JQuery files to your page prior to use this plugin. In this example I have used the online JQuery CDN files available. If you don’t want to use the online available cdn file then you can manually add the jquery files to your solution. I have explained the steps here in detail.

Implementation Details:

First add the JQuery reference and elevateXoom js file in your page

  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="Script/jquery.elevateZoom-3.0.8.min.js" type="text/javascript"></script>

Then add the required images in your page which needs to display in details preview on mouse hover.

You need to ensure that you have set two attributes to your image tag to make the elevateXoom plugin to work they are

  • “src” which holds the initial image which will get displayed
  • “data-zoom-image” which holds the expanded image which get displayed when previewed
 <img id="img1" src="http://i.imgur.com/6xIjDIB.jpg" data-zoom-image="http://i.imgur.com/HZtdHKc.jpg" />

To enable the LensZoom feature in elevateXoom plugin you need to set the zoomType to Lens. You can also set properties like lensShape and LensSize to make the feature more effective.

<script>
        // A $( document ).ready() block.
        $(document).ready(function () {
            //Attach the elevateZoom image to image
            $("#img1").elevateZoom({
                zoomType: "lens",
                lensShape: "round",
                lensSize: 100
            });
        });
    </script>

Complete Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="Script/jquery.elevateZoom-3.0.8.min.js" type="text/javascript"></script>
    <script>
        // A $( document ).ready() block.
        $(document).ready(function () {
            //Attach the elevateZoom image to image
            $("#img1").elevateZoom({
                zoomType: "lens",
                lensShape: "round",
                lensSize: 100
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <img id="img1" src="http://i.imgur.com/6xIjDIB.jpg" data-zoom-image="http://i.imgur.com/HZtdHKc.jpg" />
    </form>
</body>
</html>

Demo

Advertisements

, , , , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: