Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Image Etalage or Image Magnifier using jQuery in ASP.NET

Article:
Viewed:  2792 
Posted On:  17/10/2013 10:41:53 
How we can show big image on mouse hover on an image using jQuery in ASp.NET? 

In this article I am going to explain how we can etalage an image. Now a days you can see in many e-commerce site when you view product and if you mouse hover on any image then you can see a large and very clear image of that hover product in right side.

In this article I did same using jQuery. For this I add 2 jQuery, 1 .css file and a jQuery script..

<link rel="stylesheet" href="etalage.css" />
    <script src="jquery.min.js"></script>
    <script src="jquery.etalage.min.js"></script>


Below is my aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Immage Large</title>
    <link rel="stylesheet" href="etalage.css" />
    <script src="jquery.min.js"></script>
    <script src="jquery.etalage.min.js"></script>

    
<script>
        jQuery(document).ready(function($) { 

            $('#etalage').etalage({
                thumb_image_width: 300,
                thumb_image_height: 400,
                source_image_width: 900,
                source_image_height: 1200,
                show_hint: true              

            });

        });

    </script> 

</head>
<body>
    <div id="examples">
        <ul id="etalage">
            <li>
                <img class="etalage_thumb_image" src="img4.jpg" />
                <img class="etalage_source_image" src="img4.jpg" />
            </li>
        </ul>
    </div>
</body>
</html>
 

when you run the application:

etalage.png

Image 1.

when you mouse hover on image...

Etalage 1.png

Image 2.

Etalage 2.png

Image 3.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us