Display images in sequence in an image slideshow

Suggested Videos
Part 132 - Reload data into cache automatically when data in the table changes
Part 133 - What is AutoEventWireup in asp.net
Part 134 - Add image slideshow to your website using asp.net ajax and c#



In Part 134, we discussed adding image slideshow to a website or a web application. the problem with slideshow is that, it displays a random image every one second. Let's say our requirement is such that, we want to display images in order from 1.jpg, 2.jpg to 8.jpg. Also, below the image, we want to display the number of the image that is being displayed. Please watch Part 134, before proceeding. We will be modifying the example, that we started in Part 134.



To achieve this, 
Step 1: Include "Label1" control in the aspx page. This label control displays the image number that is being displayed.
<br /><asp:Label ID="Label1" Font-Bold="true" runat="server"></asp:Label>

Step 2: Change the code in SetImageUrl() function as shown below
private void SetImageUrl()
{
    if (ViewState["ImageDisplayed"] == null)
    {
        Image1.ImageUrl = "~/Images/1.jpg";
        ViewState["ImageDisplayed"] = 1;
        Label1.Text = "Displaying Image - 1";
    }
    else
    {
        int i = (int)ViewState["ImageDisplayed"];
        if (i == 8)
        {
            Image1.ImageUrl = "~/Images/1.jpg";
            ViewState["ImageDisplayed"] = 1;
            Label1.Text = "Displaying Image - 1";
        }
        else
        {
            i = i + 1;
            Image1.ImageUrl = "~/Images/" + i.ToString() + ".jpg";
            ViewState["ImageDisplayed"] = i;
            Label1.Text = "Displaying Image - " + i.ToString();
        }
    }
}

At the moment, there is no mechanism in place to start or stop the slideshow. We will discuss this in our next video.

No comments