Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Display images in sequence in an image slideshow - Part 135

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.

2 comments:

  1. Dear Sir,
    I am trying to have 14 images in my slide show but it only displays 8 images and then shows the 1st image again. I have written the code as you have mentioned but still i am not getting the desired output.. please help


    This is my code:
    private void setimg()
    {
    if (ViewState["ImageDisplayed"] == null)
    {
    Image1.ImageUrl = "~/Resources/Slideshow/1.jpg";
    ViewState["ImageDisplayed"] = 1;
    }
    else
    {
    int i = (int)ViewState["ImageDisplayed"];
    if (i == 14)
    {
    Image1.ImageUrl = "~/Resources/Slideshow/1.jpg";
    ViewState["ImageDisplayed"] = 1;
    }
    else
    {
    i = i + 1;
    Image1.ImageUrl = "~/Resources/Slideshow/" + i.ToString() + ".jpg";
    ViewState["ImageDisplayed"] = i;
    }
    }

    ReplyDelete
  2. if (ViewState["ImageDisplay"] == null)
    {
    Image1.ImageUrl = "~/Image/1.jpg";
    ViewState["ImageDisplay"] = 1;
    Label1.Text = "Displaying Image - 1";
    }
    else
    {
    int i = (int)ViewState["ImageDisplay"];
    i = i + 1;
    Image1.ImageUrl = "~/Image/" + i.ToString() + ".jpg";
    Label1.Text = "Displaying Image - " + i.ToString();
    ViewState["ImageDisplay"] = i;
    if (i == 8)
    {
    ViewState["ImageDisplay"] = null;
    }
    }

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.