Creating random image slideshow

Today we are going to apply our ASP.NET AJAX knowledge to create an image slideshow which is displaying images in a random sequence. To keep things simple we are trying to use step by step process from here. We can use the project that was used in the previous post.

Steps in RandomImageSlideShow.aspx

  1. Add a folder named Images to the root of the project and past 8 images into it which are having jpg, 2.jpg… up to 8.jpg.
  2. Add another WebForm called RandomImageSlideShow.
  3. Add ScriptManager control into the div tag of the form. Remember to add this inside the form tag always.
  4. Add UpdatePanel control under ScriptManager control inside the div
  5. Add ContentTemplate tag inside the UpdatePanel.
  6. Add a Timer control within that ContentTemplate tag and set the interval as 1000ms.
  7. Add Image control under Timer control inside the ContentTemplate tag and set attribute Height and Width as 200.
  8. Add text ImageDisplaying: followed by Label control under Image control inside the ContentTemplate We renamed that label as lblImageDisplaying.

Sample code in RandomImageSlideShow.aspx

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

<!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" />

ImageDisplaying: <asp:Label ID="lblImageDisplaying" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel></div>
</form>
</body>
</html>

Steps in RandomImageSlideShow.aspx.cs

  1. Create a private named SetImageUrl.
  2. Within that method create an object of Random
  3. Generate a random number from 1 to 8 using Next method of the Random object and get that random number into an integer variable called i.
  4. Set the ImageUrl property in Image control using the above random number for the image file name.
  5. Set the Text property of the Label control using that random number as the image file name.
  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.

Sample code in RandomImageSlideShow.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 RandomImageSlideShow : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                SetImageUrl();
            }
        }

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

        private void SetImageUrl()
        {
            Random ran = new Random();
            int i = ran.Next(1, 8);

            Image1.ImageUrl = "~/Images/" + i.ToString() + ".jpg";
            lblImageDisplaying.Text = i.ToString() + ".jpg";
        }
    }
}

random image slideshow

You can see an image slideshow as a random sequence as in above image. It can see simply because the Label prints the currently displaying image. You can download the source code from GitHub using https://github.com/hasiabewardana/ExperimentalAjaxWebApplication link. To see more on ASP.NET AJAX 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