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:
Image 1.
when
you mouse hover on image...
Image
2.
Image
3.