Wednesday, February 20, 2013

jQuery Magnifier Example | Showing the magnify view of image

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-
 
<%@ 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 in Image
jQuery Magnifier
kick it on DotNetKicks.com

No comments:

Post a Comment

^ Scroll to Top