Step 1 : Your .aspx page will look like:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LiteboxGridview.aspx.cs"
Inherits="LiteboxGridview" %>
<!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>GridView With Lite Box</title>
<!-- You must add jQuery for litebox-->
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<!-- You must add css for litebox-->
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
Width="100%" onrowdatabound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="Empid" HeaderText="Empid">
<ItemStyle />
</asp:BoundField>
<asp:TemplateField HeaderText="Empname">
<ItemTemplate>
<a id="employeeimage" runat="server"><asp:Label ID="empname" runat="server" Text='<%#Eval("Empname") %>'></asp:Label></a> </ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="City" HeaderText="City">
<ItemStyle />
</asp:BoundField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Step 2 : Your .cs file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
public partial class LiteboxGridview : System.Web.UI.Page
{ DataHelper helper = new DataHelper();
List<Employee> emplist = new List<Employee>();
protected void Page_Load(object sender, EventArgs e)
{ if (!IsPostBack)
{ BindGridView();
}
}
private void BindGridView()
{ helper = new DataHelper();
emplist = helper.GetEmployeeData();
if (emplist != null)
{ if (emplist.Count > 0)
{ GridView1.DataSource = emplist;
GridView1.DataBind();
}
}
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{ if (e.Row.RowType == DataControlRowType.DataRow)
{
//logic for Creating litebox effect.
HtmlAnchor employeeimage = e.Row.FindControl("employeeimage") as HtmlAnchor; if (employeeimage != null)
{ string imagepath = "empimage/l2.jpg";
employeeimage.Attributes.Add("title", "View Image"); employeeimage.Attributes.Add("rel", "lightbox"); employeeimage.Attributes.Add("href", imagepath); }
}
}
}
![litebox.gif]()
![litebox1.gif]()