Creating sequence image slideshow

We have designed a random image slideshow in our previous post. Today we are going to create a sequence image slideshow that means the slideshow starting from the first image and then keep displaying next image according to the name of the image. We named all images as 1.jpg, 2.jpd…8.jpg which are in Images folder of the root. In addition to that we are expecting add a feature to control the sequence using a Button control. Follow the below steps to achieve this.

Steps in SequenceImageSlideShow.aspx

  1. Add another WebForm called SequenceImageSlideShow.
  2. Add ScriptManager control into the div tag of the form. Remember to add this inside the form tag always.
  3. Add UpdatePanel control under ScriptManager control inside the div
  4. Add ContentTemplate tag inside the UpdatePanel.
  5. Add a Timer control within that ContentTemplate tag and set the interval as 1000ms.
  6. Add Image control under Timer control inside the ContentTemplate tag and set attribute Height and Width as 200.
  7. Add text ImageDisplaying: followed by Label control under Image control inside the ContentTemplate
  8. Add a Button control to control the image sequence.

Sample code in SequenceImageSlideShow.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SequenceImageSlideShow.aspx.cs" Inherits="AjaxWebApplication.SequenceImageSlideShow" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Image ID="Image1" runat="server" Height="200" Width="200" />

Image Displaying: <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Stop slideshow" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel></div>
</form>
</body>
</html>

Note that the WebForm is working on a stateless protocol therefore we need to have a ViewState variable to store the previous image name in the sequence.

Steps in SequenceImageSlideShow.aspx.cs

  1. Create a private method named SetImageUrl.
  2. Within that method check the ViewState Here we are using ViewState[“ImageDisplayed”] as the ViewState variable.
  3. If it is null, set ImageUrl property of Image control as “~/Images/1.jpg”, ViewState[“ImageDisplayed”] as 1 and Text property of Label control as “1.jpg”.
  4. Else again check the ViewState variable and if it is equal to 8, reset all the properties as in the step 3.
  5. If it is not equal to 8 increment the value of the ViewState and set all the properties of Image and Label controls with the updated value.
  6. Call SetImageUrl method from Page_Load event if it is not a postback.
  7. Add the Tick event handler and call SetImageUrl method from it.
  8. Add Click event handler for the Button control and if the Timer control is always enabled, disable it and set the Text property of that Button control as “Start slideshow”. If the Timer is disabled, enable it and set the Text property of that Button control as “Stop slideshow”.

Sample code in SequenceImageSlideShow.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AjaxWebApplication
{
    public partial class SequenceImageSlideShow : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
            {
                SetImageUrl();
            }
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            SetImageUrl();
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            if(Timer1.Enabled)
            {
                Timer1.Enabled = false;
                Button1.Text = "Start slideshow";
            }
            else
            {
                Timer1.Enabled = true;
                Button1.Text = "Stop slideshow";
            }
        }

        private void SetImageUrl()
        {
            if(ViewState["ImageDisplayed"] == null)
            {
                Image1.ImageUrl = "~/Images/1.jpg";
                ViewState["ImageDisplayed"] = 1;
                Label1.Text = "1.jpg";
            }
            else
            {
                int i = (int)ViewState["ImageDisplayed"];
                if (i == 8)
                {
                    Image1.ImageUrl = "~/Images/1.jpg";
                    ViewState["ImageDisplayed"] = 1;
                    Label1.Text = "1.jpg";
                }
                else
                {
                    i++;
                    Image1.ImageUrl = "~/Images/" + i.ToString() + ".jpg";
                    ViewState["ImageDisplayed"] = i;
                    Label1.Text = i.ToString() + ".jpg";
                }
            }
        }
    }
}

You can see the output windows as following. Before click the Button:

timer enabled

After button is clicked:

timer disabled

After button is clicked again:

timer enabled again

Now you have the control of the sequence of the image slideshow. You can stop the sequence in a position that you want and you can start the slideshow again. You can download the source code from GitHub using https://github.com/hasiabewardana/ExperimentalAjaxWebApplication link. You will see awesome posts in the future. Until then stay tuned with us.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s