<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<title>Show Gridview Images with Lightbox effect</title>
<style type="text/css">
.Gridview
{
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
color: black;
}
.white_content
{
display: none;
position: absolute;
top: 15%;
left: 30%;
width: 25%;
padding: 0px;
border: 0px solid #a6c25c;
background-color: white;
z-index: 1002;
overflow: auto;
}
.headertext
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #f19a19;
font-weight: bold;
}
</style>
<script type="text/javascript">
function ShowImages() {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block'
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<asp:FileUpload ID="fileuploadimages" runat="server" />
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</div>
<div align="center">
<asp:GridView runat="server" ID="gvImages" AutoGenerateColumns="false" CssClass="Gridview" Width="500px"
HeaderStyle-BackColor="#61A6F8" DataKeyNames="ImageName">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<%--<asp:BoundField DataField="ImageName" HeaderText="Image Name" />--%>
<asp:TemplateField HeaderText="Image Name">
<ItemTemplate>
<asp:Label ID="LblImageName" runat="server" Text='<%#Eval("ImageName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:ImageButton ID="imgbtn" runat="server" ImageUrl='<%#Eval("ImagePath") %>' OnClick="imgbtn_Click"
Style="height: 50px; width: 50px;" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="light" class="white_content">
<table cellpadding="0" cellspacing="0" border="0" style="background-color: #a6c25c;"
width="100%" >
<tr>
<td height="16px">
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
close</a>
</td>
</tr>
<tr>
<td style="padding-left: 16px; padding-right: 16px; padding-bottom: 16px">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color: #fff"
width="100%">
<tr>
<td align="center" colspan="2" class="headertext">
<asp:Label ID="LblDiaplayImageName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td align="center">
<asp:Image ID="imglightbox" runat="server" />
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
</table>
</td>
</tr>
</table>
<div align="center" class=" headertext">
<asp:Label ID="txtlbl" runat="server"></asp:Label></div>
</div>
</form>
</body>
</html>
========================================================================
C# Code
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
string strSQlQuery = "";
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString());
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (!IsPostBack)
{ BindGrid(); }
}
catch (Exception ex)
{ lblMessage.Text = "Page_Load():"+ex.Message; }
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
try
{
//Get Filename from fileupload control
string filename = Path.GetFileName(fileuploadimages.PostedFile.FileName);
//Save images into Images folder
fileuploadimages.SaveAs(Server.MapPath("Images/" + filename));
//Getting dbconnection from web.config connectionstring
//Open the database connection
con.Open();
//Query to insert images path and name into database
SqlCommand cmd = new SqlCommand("Insert into ImagesPath(ImageName,ImagePath) values(@ImageName,@ImagePath)", con);
//Passing parameters to query
cmd.Parameters.AddWithValue("@ImageName", filename);
cmd.Parameters.AddWithValue("@ImagePath", "Images/" + filename);
cmd.ExecuteNonQuery();
//Close dbconnection
con.Close();
}
catch (Exception ex)
{ lblMessage.Text = "btnSubmit_Click():" + ex.Message; }
}
protected void imgbtn_Click(object sender, EventArgs e)
{
try
{
ImageButton imgbtn = sender as ImageButton;
GridViewRow gvrow = imgbtn.NamingContainer as GridViewRow;
Label LblImageName = (Label)gvrow.FindControl("LblImageName");
LblDiaplayImageName.Text = LblImageName.Text;
//Find Image button in gridview
ImageButton imgbtntxt = (ImageButton)gvrow.FindControl("imgbtn");
//Assign imagebutton url to image field in lightbox
imglightbox.ImageUrl = imgbtn.ImageUrl;
ScriptManager.RegisterStartupScript(Page, typeof(Page), "ShowValidation", "javascript:ShowImages();", true);
}
catch (Exception ex)
{ lblMessage.Text = "imgbtn_Click():" + ex.Message; }
}
private void BindGrid()
{
DataSet DsetShowImage = new DataSet();
try
{
strSQlQuery = "SELECT * FROM ImagesPath";
SqlDataAdapter Dadp = new SqlDataAdapter(strSQlQuery, con);
Dadp.Fill(DsetShowImage);
gvImages.DataSource = DsetShowImage.Tables[0];
gvImages.DataBind();
}
catch (Exception ex)
{ lblMessage.Text = "BindGrid" + ex.Message; }
}
}
============================================================================
