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.