Zoom image on Mouse Hover in Asp.Net as e-commerce websites(eg., flipkart) using Jquey

First of all add following code lines inside your <head> tag::

<link href="jQuery.fancybox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="js/jquery.elevatezoom.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox.pack.js" type="text/javascript"></script>

<style type="text/css">
 #gallery_01 img{border:2px solid white;width: 96px;}
  .active img{border:2px solid #333 !important;}

Then add following code inside your body tag ::

    <img id="img1" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg" />
<div id="gallery_01">
<a  href="#" class="active" data-image="images/small/image1.png"
<img src="images/small/image1.png"  /></a>
<a  href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg">
<img src="images/small/image2.png" /></a>
<a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg">
     <img src="images/small/image3.png" /></a>
<a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg">
<img src="images/small/image4.png" /></a>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#img1").elevateZoom({ gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: "active" });
            $("#img1").bind("click", function (e) {
                var ez = $('#img1').data('elevateZoom');
                return false;

I am writing above used css and js file in next post as blogspot doesn't allows file attachments or you can download from the below links ::




Popular posts from this blog

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

How to import CSV files into DataTable in C#

go to top image