Post
Ask Question

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


Similar Articles