Post
Ask Question

Zoom a Page Element using Jquery Plugin In ASP.NET

Introduction

This article describes how to use Zoomooz jQuery Plugin in Asp.net page element to Zoom it.

Description

To create this application you need the jQuery plugins listed below.

  • jquery.zoomooz.min.js
  • jquery.min.js
  • website.css

You can download them from the source code attached in this page.

Design

Here I added Three image and one gridview as page element.

Now design your screen like the following screen:

image1.jpg

Or you can copy the following source code:

 <body>
    <form id="form1" runat="server">
    <div>
        <table align="center">
            <thead>
                Sample</thead>
            <tr>
                <td align="center" style="width: 70px; height: 70px;">
                    <img src="css/Chrysanthemum.jpg" class="zoomTarget" height="100px"width="100px" />
                </td>
                <td align="center" style="width: 70px; height: 70px;">
                    <img src="css/Jellyfish.jpg" class="zoomTarget" height="100px"width="100px" />
                </td>
                <td align="center" style="width: 70px; height: 70px;">
                    <img src="css/Penguins.jpg" class="zoomTarget" width="100px"height="100px" />
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center">
                    <asp:GridView ID="GridView1" runat="server" CellPadding="3" Height="50px"Width="421px"
                        AutoGenerateColumns="False" BackColor="#DEBA84" BorderColor="#DEBA84"BorderStyle="None"
                        BorderWidth="1px" CellSpacing="2">
                        <Columns>
                            <asp:TemplateField HeaderText="Dosage">
                                <ItemTemplate>
                                    <asp:Label ID="Label1" runat="server"Text='<%#Eval("Dosage") %>' class="zoomTarget"
                                        ForeColor="Black"></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Drug">
                                <ItemTemplate>
                                    <asp:Label ID="Label2" runat="server"Text='<%#Eval("Drug") %>' class="zoomTarget"
                                        ForeColor="Black"></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Patient">
                                <ItemTemplate>
                                    <asp:Label ID="Label3" runat="server"Text='<%#Eval("Patient") %>' class="zoomTarget"
                                        ForeColor="Black"></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                        <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
                        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
                        <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
                        <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
                        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True"ForeColor="White" />
                        <SortedAscendingCellStyle BackColor="#FFF1D4" />
                        <SortedAscendingHeaderStyle BackColor="#B95C30" />
                        <SortedDescendingCellStyle BackColor="#F1E5CE" />
                        <SortedDescendingHeaderStyle BackColor="#93451F" />
                    </asp:GridView>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Next add the following JavaScript and CSS style in the head tag

 <head runat="server">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.zoomooz.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/website.css" type="text/css" media="screen">
    <title></title>
</head>

Now go to the code view.

Write the BindGrid using the database or you can use a static datatable.

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("Dosage", typeof(int));
        table.Columns.Add("Drug", typeof(string));
        table.Columns.Add("Patient", typeof(string));
        table.Columns.Add("Date", typeof(DateTime));
        table.Rows.Add(25, "Indocin", "David", DateTime.Now);
        table.Rows.Add(50, "Enebrel", "Sam", DateTime.Now);
        table.Rows.Add(10, "Hydralazine", "Christoff", DateTime.Now);
        table.Rows.Add(21, "Combivent", "Janet", DateTime.Now);
        table.Rows.Add(100, "Dilantin", "Melanie", DateTime.Now);
        GridView1.DataSource = table;
        GridView1.DataBind();
    }
}

In the above source code check this class="zoomTarget".

Those page element you want apply Zoom effect add this class to in their tag.

Now build your application.

image2.jpg

Now click on any image it will Zoom it.

image3.jpg

Now click on any Grid cell it will Zoom the particular field.

image4.png

For any modifications or problems please comment.

Thanks.