How to create Dynamic Image gallery for website
Event Gallery , photo Gallery, Responsive Event Gallery, Animated Photo Gallery
Default15.aspx(control
Panel Page)
<%@
Page Language="C#" AutoEventWireup="true"
CodeFile="Default15.aspx.cs"
Inherits="Default15"
%>
<!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">
.style2
{
background-color:
#0099FF;
font-family:
Algerian;
text-decoration:
underline;
color:
#FF3300;
font-size:
xx-large;
}
.style3
{
text-align:
center;
}
</style>
</head>
<body bgcolor="#0099ff">
<form id="form1" runat="server">
<div>
</div>
<div>
<table align="center">
<tr>
<td colspan="2" height="100"
class="style3"><strong><span class="style2">Picture Gallery</span></strong></td>
</tr>
<tr>
<td>
Upload Image:
</td>
<td>
<asp:FileUpload ID="fileuploadimages"
runat="server"
/>
</td>
</tr>
<tr>
<td>
Enter Image Desc:
</td>
<td>
<asp:TextBox ID="txtDesc"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit"
runat="server"
Text="Submit"
onclick="btnSubmit_Click"
/>
</td>
</tr>
<tr>
<td colspan="2">
<asp:DataList ID="dlImages"
runat="server"
RepeatColumns="3"
CellPadding="5">
<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]"
DeleteCommand="Delete [SlideShowTable] where id=@id;">
<DeleteParameters>
<asp:Parameter Name="id" />
</DeleteParameters>
</asp:SqlDataSource>
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource1" DataKeyNames="id" AllowPaging="True"
AllowSorting="True" Width="1105px" CellPadding="4" ForeColor="#333333"
GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="id" HeaderText="id" InsertVisible="False"
ReadOnly="True" SortExpression="id" />
<asp:BoundField DataField="imagename" HeaderText="imagename"
SortExpression="imagename" />
<asp:BoundField DataField="description" HeaderText="description"
SortExpression="description" />
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle
BackColor="#E9EBEF"
/>
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</form>
</body>
</html>
Default15.aspx.cs
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 Default15 : 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;
GridView1.DataBind();
dlImages.DataBind();
con.Close();
}
protected void btnSubmit_Click(object
sender, EventArgs e)
{
//Get Filename from
fileupload control
string filename = Path.GetFileName(fileuploadimages.PostedFile.FileName);
//Save images into
SlideImages folder
fileuploadimages.SaveAs(Server.MapPath("SlideImages/" + filename));
//Open the database
connection
con.Open();
//Query to insert
images name and Description into database
SqlCommand cmd = new SqlCommand("Insert into SlideShowTable(ImageName,Description)
values(@ImageName,@Description)", con);
//Passing parameters
to query
cmd.Parameters.AddWithValue("@ImageName", filename);
cmd.Parameters.AddWithValue("@Description", txtDesc.Text);
cmd.ExecuteNonQuery();
//Close dbconnection
con.Close();
txtDesc.Text = string.Empty;
BindDataList();
}
}
#SradhaWebCreations
Contact : +91-9040573923, +91-7008182025
http://sradhawebcreations.com/
http://sradhawebcreations.blogspot.in/
https://facebook.com/sradhawebcreations
https://www.facebook.com/Sradhawebeducation/
