elevateZoom – Jquery Zoomin Plugin

Introduction:

Recently I have come across an excellent Jquery Zoom in plugin. In this article I am going to explain details about the same – elevateZoom Plugin.

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="zoom_01" src="http://i.imgur.com/6xIjDIB.jpg" data-zoom-image="http://i.imgur.com/HZtdHKc.jpg" />

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
             $("#zoom_01").elevateZoom();
         });
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
         <div>
             <img id="zoom_01" src="http://i.imgur.com/6xIjDIB.jpg" data-zoom-image="http://i.imgur.com/HZtdHKc.jpg" />
         </div>
     </form>
 </body>
 </html>
 

I have explained only the basic implementation of elevatedZoom plugin, however this plugin have lots of other features , you will get more details from this link

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