Introduction:
Today I am going to show you how to display slideshow images using light box in Jquerry.
The Table looks like this..
Download the Sample Code from Here
Today I am going to show you how to display slideshow images using light box in Jquerry.
The Table looks like this..
Now Lets see the .aspx Page
<head id="Head1" runat="server">
<title>Display Images Slideshow in C# 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>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<td colspan="2" height="100"></td>
</tr>
<tr>
<td>
Upload Image:
</td>
<td>
<asp:FileUpload ID="fileuploadimages" runat="server" />
</td>
</tr>
<tr>
<td>
Enter Image Description:
</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("ImagePath") %>' title='<%#Eval("Description") %>' rel="lightbox[round]" runat="server" >
<asp:Image ID="Image1" ImageUrl='<%# Bind("ImagePath") %>' 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>
</form>
</body>
</html>
Now Lets see the .aspx.cs Page
public partial class _Default : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(@"Data Source=ADMIN-PC\SQLEXPRESS;Integrated Security=True");
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,ImagePath,Description from tblSlideImages", con);
SqlDataAdapter da = new SqlDataAdapter(command);
DataTable dt = new DataTable();
da.Fill(dt);
dlImages.DataSource = dt;
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 tblSlideImages(ImageName,ImagePath,Description) values(@ImageName,@ImagePath,@Description)", con);
//Passing parameters to query
cmd.Parameters.AddWithValue("@ImageName", filename);
cmd.Parameters.AddWithValue("@ImagePath", "~/SlideImages/"+filename);
cmd.Parameters.AddWithValue("@Description", txtDesc.Text);
cmd.ExecuteNonQuery();
//Close dbconnection
con.Close();
txtDesc.Text = string.Empty;
BindDataList();
}
}
If you observe above code in header section I added some of script files and css file by using those files we will get lightbox effect slideshow.
Another thing is here.
<a id="imageLink" href='<%# Eval("ImagePath") %>' title='<%#Eval("Description") %>' rel="lightbox[round]" runat="server" >
|
In above tag I added rel="lightbox" this tag is used to active lightbox title this attribute is used to display image caption. If we have set of related images to group we need to include group name in between square brackets in rel attribute like rel="lightbox[round]"
Now run yoyr application and if you see in this lightbox slideshow we have different features like auto playing,navigate images using ‘prev’ and ‘next’ links, show image description and stop slideshow options and many more.
In slideshow we can navigate by using keyboard shortcuts
f- first image
l- last image
x and c to close
left arrow and p for previous image
right arrow and n for next image
you can find this information of shortcut in lightbox.js file.
Download the Sample Code from Here
Twitter
Facebook
Digg
Delicious
Stumble
2 comments:
This is really nice article have a look of this also
http://www.dotnetpools.com/2013/03/dynamic-jquery-image-gallery-with-text.html
create custom image slide view
Post a Comment