Reader Level:
Article
Learn .NET

Making an Image Slideshow in ASP.NET

By Sapna Malik on Aug 04, 2010
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:-

slideshow1.bmp

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

slideshow2.bmp

I hope you like this article. I am using JavaScript in this article.So,open the zip file.