Dynamic Animated Event Gallery with Light Box Effect
After clicking on the picture of the data list view the
picture will be displayed as bellow……………..
LightBox.aspx(for visitors)
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="LightBox.aspx.cs" Inherits="LightBox" %>
<!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>Display Images
Slideshow in asp.net using JQuery</title>
<link rel="stylesheet"
href="lightbox.css"
type="text/css"
media="screen"
/>
<script type="text/javascript"
src="prototype.js"></script>
<script type="text/javascript"
src="scriptaculous.js?load=effects"></script>
<script type="text/javascript"
src="lightbox.js"></script>
<style type="text/css">
.style1
{
font-family:
Algerian;
text-decoration:
underline;
font-size:
xx-large;
text-align:
center;
color:
#FF3300;
}
.style2
{
background-color:
#0099FF;
}
</style>
</head>
<body bgcolor="#0099ff">
<form id="form1" runat="server">
<div>
</div>
<div>
<table align="center">
<tr>
<td height="100"
class="style1"><strong><span class="style2">Picture Gallery</span></strong></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td bgcolor="#0099FF">
<asp:DataList ID="dlImages"
runat="server"
RepeatColumns="3"
CellPadding="5"
Height="235px" Width="400px">
<ItemTemplate>
<a id="imageLink"
href='<%#
Eval("ImageName","~/SlideImages/{0}") %>' title='<%#Eval("Description") %>' rel="lightbox[Brussels]" runat="server"
>
<asp:Image ID="Image1" ImageUrl='<%# Bind("ImageName",
"~/SlideImages/{0}") %>' runat="server" Width="112" Height="84" />
</a>
</ItemTemplate>
<ItemStyle BorderColor="Brown"
BorderStyle="dotted"
BorderWidth="3px"
HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</td>
</tr>
</table>
<br />
</div>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString="<%$
ConnectionStrings:myDbConnectionString1 %>"
SelectCommand="SELECT * FROM [SlideShowTable]">
</asp:SqlDataSource>
</form>
</body>
</html>
LightBox.aspx(for visitors)
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 LightBox : System.Web.UI.Page
{
SqlConnection
con = new SqlConnection(ConfigurationManager.ConnectionStrings["myDbConnectionString1"].ToString());
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
BindDataList();
}
}
protected void BindDataList()
{
con.Open();
//Query to
get ImagesName and Description from database
SqlCommand
command = new SqlCommand("SELECT ImageName,Description from
SlideShowTable", con);
SqlDataAdapter
da = new SqlDataAdapter(command);
DataTable
dt = new DataTable();
da.Fill(dt);
dlImages.DataSource = dt;
dlImages.DataBind();
//GridView1.DataSource
= dt;
con.Close();
}
}
#SradhaWebCreations
Contact : +91-9040573923, +91-7008182025
http://sradhawebcreations.com/
http://sradhawebcreations.blogspot.in/
https://facebook.com/sradhawebcreations
https://www.facebook.com/Sradhawebeducation/
