How to show dynamic photo gallery in asp.net
In previous i told you how to save gallery in data base using asp.net (Previous Blog) . Now i will tell tell how to display that image in your website.
First add page in your website with name of album.aspx
and write following html code in this page.
CSS Code
<style type="text/css">
.effect2
{
position: relative;
background-color:#99bf38;
border:1px solid #ccc;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
</style>
<div class="about-section">
<div class="container">
<h3> Gallery</h3>
<div class="about-grids">
<div class="col-md-4 about-grid">
<h1> Welcome</h1>
</div>
<div class="col-md-8 about-grid1">
<h4>Gallery</h4>
<asp:DataList ID="DataList1" runat="server" DataKeyField="Id"
DataSourceID="SqlDataSource1" CellSpacing="4" RepeatColumns="3"
RepeatDirection="Horizontal" onitemcommand="DataList1_ItemCommand"
Width="227px">
<ItemTemplate>
<center>
<asp:Label ID="GroupIdLabel1" runat="server" Text='<%# Eval("GroupName") %>' Visible="False" /></center>
<div style="height:30px"> </div>
<div class="effect2" style="margin-left:10px">
<div style="top:10px">
<center>
<asp:ImageButton ID="ImageButton1" runat="server" Width="90%" Height="200" ImageUrl='<%# Eval("Image") %>' />
</center>
</div>
<div style="width:217px; top:50px; text-align:center; line-height:22px">
<br />
<center>
<p style="font-size:13PX; color:#fff"> <%# Eval("GroupName")%> </p>
</center>
</div>
<div style="height:30px"> </div>
</div>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:CS %>"
SelectCommand="SELECT * FROM [GroupImage]"></asp:SqlDataSource>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
Now add below code in .cs file (code behind)
protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
Label lbl2 = (Label)e.Item.FindControl("GroupIdLabel1");
Session["GroupImageName"] = lbl2.Text;
Response.Redirect("Image.aspx");
}
Now add Another page with name showimage.aspx
and add bellow html code in this file
Add Css File
<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">
.effect2
{
position: relative;
background-color:#99bf38;
border:1px solid #ccc;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
</style>
<div class="about-section">
<div class="container">
<h3> Gallery</h3>
<div class="about-grids">
<div class="col-md-4 about-grid">
</div>
<div class="col-md-8 about-grid1">
<h4>Gallery</h4>
<asp:DataList ID="DataList2" runat="server" DataSourceID="SqlDataSource2"
RepeatColumns="4" RepeatDirection="Horizontal" Width="220px">
<ItemTemplate>
<center>
<asp:Label ID="GroupIdLabel1" runat="server" Text='<%# Eval("GroupName") %>' Visible="False" /></center>
<div style="height:30px"> </div>
<div class="effect2" style="margin-left:10px">
<div style="top:10px">
<div class="frame1">
<center>
<a id="imageLink" href='<%# Eval("Image","~/{0}") %>' title='<%#Eval("Name") %>' rel="lightbox[Brussels]" runat="server" >
<asp:Image ID="Image1" ImageUrl='<%# Bind("Image", "~/{0}") %>' runat="server" Width="195" Height="160" style="margin-top:6px" />
</a>
</center>
<p class="heading" style="font-size:12px; line-height:22px; color:#fff"> <%# Eval("Name") %></p>
</center>
</div>
</center>
</div>
<div style="height:30px"> </div>
</div>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:CS %>"
SelectCommand="SELECT * FROM [Image] WHERE ([GroupName] = @GroupName) ORDER BY [Id]">
<SelectParameters>
<asp:SessionParameter Name="GroupName" SessionField="GroupImageName"
Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
In this file no code need to add code behind File (.cs)
No comments:
Post a Comment