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;}
 </style>

Then add following code inside your body tag ::

<div>
    <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"
data-zoom-image="images/large/image1.jpg">
<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>
</div>
    </div>
    <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');
                ez.closeAll();
                $.fancybox(ez.getGalleryList());
                return false;
            });
        });
</script>

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 ::

fancybox.googlecode.com/files/jquery.fancybox-1.3.4.zip

http://www.elevateweb.co.uk/image-zoom/download

Comments

Popular posts from this blog

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

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

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image