.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Zoom a Page Element using Jquery Plugin

Posted By:Sanjeeb Lenka       Posted Date: November 10, 2013    Points: 200    Category: ASP.NET    URL: http://www.dotnetspark.com  

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

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:



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.



Now click on any image it will Zoom it.



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


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend