In this article, We will see how to make a
image slideshow in ASP.NET. We will use the JavaScript of this slideshow.We will
use generic handler for thumbnail image.Generic Handler use for page
implementing.
This code is aspx:-
<%@
Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!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
runat="server">
<title>SlideShow</title>
<meta
http-equiv="content-type"
content="text/html;
charset=utf-8" />
<meta
name="keywords"
content="SlideShow,
Visual Slideshow, Web Slide Show, Free Slideshow Creator"
/>
<meta
name="description"
content="SlideShow
created with Visual Slideshow, a free wizard program that helps you easily
generate beautiful web slideshow" />
<link
rel="stylesheet"
type="text/css"
href="engine/css/slideshow.css"
media="screen"
/>
<style
type="text/css">
.slideshow
a#vlb
{
display:
none;
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<script
type="text/javascript">
function OpenPopup() {
window.open("ImageUpload.aspx", "List",
"scrollbars=yes,resizable=no,width=500,height=300";
return
false;
}
</script>
<script
type="text/javascript"
src="engine/js/mootools.js"></script>
<script
type="text/javascript"
id="allcode"
src="engine/js/visualslideshow.js"></script>
<table>
<tr>
<td
align="left"
valign="top">
<asp:Button
runat="server"
ID="UploadButton"
Text="Upload"
OnClick="UploadButton_Click"/>
</td>
</tr>
</table>
<div
id="show"
class="slideshow">
<div
class="slideshow-images"
id="Show">
<asp:DataGrid
ID="DataGridImage"
runat="server"
AutoGenerateColumns="false">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<a
href='<%#
getHREF(Container.DataItem)%>'>
<img
align="middle"
border="0"
id="imgRM"
src='ImageResizeGeneralHandler.ashx?img=<%#
getSRC(Container.DataItem) %>&sz=250'
/></a>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</div>
<div
class="slideshow-thumbnails">
<ul>
<asp:DataGrid
ID="DataGridThumbnail"
runat="server"
AutoGenerateColumns="False"
ShowHeader="False">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<li><a
href='<%#
getHREF1(Container.DataItem)%>'>
<img
align="middle"
border="0"
id="imgRM1"
src='ImageResizeGeneralHandler.ashx?img=<%#
getSRC1(Container.DataItem)%>&sz=60'
/></a>
</li>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</ul>
</div>
</div>
</form>
</body>
</html>
This code is .cs:-
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Diagnostics;
using
System.IO;
using
System.Data;
using
System.Xml;
public
partial class
_Default : System.Web.UI.Page
{
protected void
Page_Load(object sender,
EventArgs e)
{
if (!IsPostBack)
{
this.UploadButton.Attributes.Add("onclick",
"javascript:return OpenPopup()");
}
DataSet objDataSet =
new DataSet();
objDataSet.ReadXml(Server.MapPath("ImageXMLFile.xml"));
DataGridImage.DataSource = objDataSet;
DataGridImage.DataBind();
DataSet objDataSet1 =
new DataSet();
objDataSet1.ReadXml(Server.MapPath("ImageXMLFile.xml"));
DataGridThumbnail.DataSource = objDataSet1;
DataGridThumbnail.DataBind();
string FileName = Server.MapPath("ImageXMLFile.xml");
XmlDocument xmlDoc =
new XmlDocument();
xmlDoc.Load(FileName);
XmlNodeList xmlnode =
xmlDoc.GetElementsByTagName("CreateDate");
int TotalImage = xmlnode.Count;
int i = 10;
foreach (XmlNode
node in xmlnode)
{
for (i = 10; i <= TotalImage; i++)
{
XmlElement xmlElement =
xmlDoc.DocumentElement;
XmlNodeList FirstImage =
xmlElement.ChildNodes;
DataSet dataset =
new DataSet();
dataset.ReadXml(Server.MapPath("ImageXMLFile.xml"));
DataGridImage.DataSource = dataset.Tables[0];
}
}
}
protected void
UploadButton_Click(object sender,
EventArgs e)
{
Response.Redirect("ImageUpload.aspx");
}
public string
getHREF(object sURL)
{
DataRowView dRView = (DataRowView)sURL;
return ResolveUrl("~/data/images/"
+ dRView["ImageName"].ToString());
}
public string
getSRC(object imgSRC)
{
DataRowView dRView = (DataRowView)imgSRC;
if (dRView["CreateDate"].ToString()
!= "")
{
return ResolveUrl("~/data/images/"
+ dRView["ImageName"].ToString());
}
else
{
return ResolveUrl("~/data/images/1.jpg");
}
}
public string
getHREF1(object sURL)
{
DataRowView dRView = (DataRowView)sURL;
return ResolveUrl("~/data/thumbnails/"
+ dRView["ThumbnailsImageName"].ToString());
}
public string
getSRC1(object imgSRC)
{
DataRowView dRView = (DataRowView)imgSRC;
if (dRView["CreateDate"].ToString()
!= "")
{
return ResolveUrl("~/data/thumbnails/"
+ dRView["ThumbnailsImageName"].ToString());
}
else
{
return ResolveUrl("~/data/thumbnails/1.jpg");
}
}
}
Output:-
We can use more than image
this slide show and image upload and save the data folder.So,Click the upload
button and open the new window for image upload.
Output:-
I hope you like this article.
I am using JavaScript in this article.So,open the zip file.