Image Zoom on Mouseover
Image Display Small Size MouseOver The Image Show Zooming the Particular Image Using JQuery Plugin in Asp.Net.
Download Coding
Download
JQueryPlugin
DEMO
Image Display Small Size MouseOver The Image Show Zooming the Particular Image Using JQuery Plugin in Asp.Net.
Download Coding
Download
JQueryPlugin
DEMO
HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title> </title>
<script type="text/javascript" src="JQuery/jquery-1.4.1.js"></script>
<script type="text/javascript" src="JQuery/Drizzles.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#image3').addimagezoom()
$('#image2').addimagezoom({
zoomrange: [7, 7],
magnifiersize: [550, 550],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'Green',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: '2.png'
})
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300, 300],
magnifierpos: 'right',
cursorshade: true,
largeimage: '1.png'
})
})
</script>
<style type="text/css">
.magnifyarea
{
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<table>
<tr><td>
<asp:Image ID="image1" runat="server" ImageUrl="~/1.png" Width="100px"></asp:Image>
</td><td>
<asp:Image ID="image2" runat="server" ImageUrl="~/2.png" Width="100px" />
</td></tr>
<tr><td colspan="2">
<asp:Image ID="image3" runat="server" ImageUrl="~/3.png" Width="100px" />
</td></tr>
</table>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment