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" "">
<html xmlns="">
<head runat="server">
    <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 ($) {
             lensWidth: 100, // width of the lens
             lensHeight: 100
    <form id="form1" runat="server">
        <a href="Image/2.jpg" rel="magnify">
            <asp:Image ID="imgTest" runat="server" ImageUrl="~/Image/2.jpg" Height="300" Width="500" />

jQuery Magnifier in Image
jQuery Magnifier
kick it on

No comments:

Post a Comment

If You Enjoyed This Post Please Take 5 Seconds To Share It.

^ Scroll to Top hgpromo