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
First - Create New Web Form - Add Image Control From ToolBox - Image Property[F4] - ImageUrl - Assign Image for All Image Control
Next - Add JQuery Condition For All Image Control - Position,ZoomSize etc..
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>
First - Create New Web Form - Add Image Control From ToolBox - Image Property[F4] - ImageUrl - Assign Image for All Image Control
Next - Add JQuery Condition For All Image Control - Position,ZoomSize etc..
.gif)
