Sradha WebCreations | mobile app designing Company In Cuttack,Bhubaneswar odisha: animated image gallery

Saturday, August 18, 2018

Dynamic Animated Event Gallery with Light Box Effect | Sradha WebCreations

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">

<title>Display Images Slideshow in asp.net using JQuery</title>

.style1

{

font-family: Algerian;

text-decoration: underline;

font-size: xx-large;

text-align: center;

color: #FF3300;

}

.style2

{

background-color: #0099FF;

}

</style>

</head>

<div>

</div>

<div>

<tr>

<td height="100" class="style1"><strong><span class="style2">Picture Gallery</span></strong></td>

</tr>

<tr>

<td>

 </td>

</tr>

<tr>

<asp:DataList ID="dlImages" runat="server" RepeatColumns="3" CellPadding="5"

Height="235px" Width="400px">

<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/

How to create Image gallery for website | Sradha WebCreations

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">

<title>Display Images Slideshow in asp.net using JQuery</title>

.style2

{

background-color: #0099FF;

font-family: Algerian;

text-decoration: underline;

color: #FF3300;

font-size: xx-large;

}

.style3

{

text-align: center;

}

</style>

</head>

<div>

</div>

<div>

<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>

<asp:DataList ID="dlImages" runat="server" RepeatColumns="3" CellPadding="5">

<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;">

<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">

<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>

</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();

}

Pages

Saturday, August 18, 2018

Dynamic Animated Event Gallery with Light Box Effect | Sradha WebCreations

How to create Image gallery for website | Sradha WebCreations