How To Create Image Slideshow In Asp Net C#

Updated date Aug 04, 2010

232k
14

In this article, We will see how to make an image slideshow in ASP.NET.

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