Here, I will show you a simple example of jQuery magnifier for image. Here in this example, I have used the dio5 jQuery magnifier plugin . You can download this plugin from here.
To implement this we need to write the code like as shown below-
Output-
To implement this we need to write the code like as shown below-
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="Default.aspx.cs"
Inherits="JqueryMagnifier._Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js"
type="text/javascript"></script>
<script src="Scripts/jquery.magnifier.js"
type="text/javascript"></script>
<link href="StyleSheet/jquery.magnifier.css"
rel="stylesheet"
type="text/css"
/>
<script type="text/javascript">
jQuery(function ($) {
$('a[rel*="magnify"]').magnify(
{
lensWidth: 100, // width of the lens
lensHeight: 100
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="Image/2.jpg"
rel="magnify">
<asp:Image ID="imgTest"
runat="server"
ImageUrl="~/Image/2.jpg"
Height="300"
Width="500"
/>
</a>
</div>
</form>
</body>
</html>
Output-
 |
| jQuery Magnifier |
No comments:
Post a Comment