ASP.NET AJAX Slideshow using UpdatePanel and Timer

I recently was faced with the task of creating a slideshow with the AJAX Control toolkit.  Now, there is a built in Slideshow control but it requires a webservice for the datasource, and I didn't want to clutter up my web project.  What I needed was an ajax control with the following requirements:

1. Ability to control the time between picture transitions
2. Fade out of image by zeroing out image opacity, and then Fade in by resetting opacity.
3. Ability to change other objects on the page besides the image (ex. the <div> below the image that contained the image description) when the image changes

So, I did some messing around and ended up with a solution using the update panel, update panel animation extender, and the timer. 

So, let's see some code, right!  Here is the .aspx page:

<%-- Script Manager is required on any page with AJAX functionality--%>

<asp:ScriptManager runat="server" ID="ScriptManager">

</asp:ScriptManager>

<%-- The timer will raise the 'Tick' event every 10000 milliseconds (10 seconds) --%>

<asp:Timer runat="server" Interval="10000" ID="SlideShowTimer" OnTick="SlideShowTimer_Tick" />

<br />

<h2 style="text-transform: uppercase; margin: 10px 0px 0px 8px; display: inline;">

    Welcome to the lounge

</h2>

<br />

<asp:UpdatePanel runat="server" ID="SlideShow" UpdateMode="Always">

    <ContentTemplate>

        <%-- This is the main slideshow image control --%>

        <img runat="server" id="SlideShowImage1" src="../Images/HomepageSlideshow/04.jpg"

            alt="First Image" />

        <asp:Label runat="server" ID="SlideShowText" Text="First Slide" />

    </ContentTemplate>

    <Triggers>

        <%-- The update panel will postback when the timer 'tick' event fires --%>

        <asp:AsyncPostBackTrigger ControlID="SlideShowTimer" EventName="Tick" />

    </Triggers>

</asp:UpdatePanel>

<asp:UpdatePanelAnimationExtender runat="server" ID="UPextender" TargetControlID="SlideShow"

    BehaviorID="animation">

    <Animations>

       <OnUpdating>

            <%-- It should take 1/2 of a second to fade out --%>

            <FadeOut Duration=".5" Fps="20" minimumOpacity=".1" />

        </OnUpdating>

        <OnUpdated>

            <%-- It should take 1 and 1/2 of a second to fade back in --%>

            <FadeIn Duration="1.5" Fps="20" minimumOpacity=".1" />

        </OnUpdated>

    </Animations>

</asp:UpdatePanelAnimationExtender>

• The script manager is required on the page for the AJAX extensions to work correctly.
• The timer control raises the "tick" event every 10 seconds.
• The Update panel updateMode is set to always. This means that anytime any item on the page raises a postback event, the update panel will update itself.  The Update panel also contains an img and label in its content template.  There is also a Trigger section that registers the timers "tick" event as a trigger for the update panel to update.
• The Update panel animation extender exists to handle the desired fade out / fade in effect.  The update panel animation extender <animation> section contains animation specific xml.  Read the animation reference and walkthrough.  My specific animation is set to fade to an opacity of .1 over a period of .5 seconds.  And then when it fades back in, it will start at .1 opacity, and take 1.5 seconds to return to full opcaity.

Now that we have seen the markup, lets take a look at the C# code event handlers and methods.

SlideShowTimer_Tick event handler: The timer control fires this event every 10 seconds.  As you can see, the event handler creates a DateTime stamp 1/2 second from when the event is fired.  This is use to create a delay of half a second, so that the update panel animation can finish it's FadeOut animation before we change the image.   After the .5 second delay is completed, we get a random image name from the RandomImageName() method.  We then set the text of the image caption to be the name of the new image file.

protected void SlideShowTimer_Tick(object sender, EventArgs e)

{

    DateTime later = DateTime.Now.AddSeconds(.5);

    while (DateTime.Now < later)

    {

    }

    this.SlideShowImage1.Src = RandomImageName();

    this.SlideShowText.Text = this.SlideShowImage1.Src.ToString();

}

RandomImageName() method: This is a private method that returns a string value.  We create an instance of the System.Random class.  We then limit the random integer to be a number between 1 and 5, since we are only working with 6 images in the slideshow.

private string RandomImageName()

{

    Random rand = new Random();

    int RandomInt = rand.Next(0, 5);

    switch (RandomInt)

    {

        case 0:

            return "../Images/HomepageSlideshow/04.jpg";

            break;

        case 1:

            return "../Images/HomepageSlideshow/10.jpg";

            break;

        case 2:

            return "../Images/HomepageSlideshow/12.jpg";

            break;

        case 3:

            return "../Images/HomepageSlideshow/13.jpg";

            break;

        case 4:

            return "../Images/HomepageSlideshow/14.jpg";

            break;

        case 5:

            return "../Images/HomepageSlideshow/16.jpg";

            break;

        default:

            return "../Images/HomepageSlideshow/04.jpg";

            break;

    }

}

Now, since the update panel has the "tick" event defined as a trigger, it will update the image src right after the FadeOut animation completes (1/2 second) and the image caption will also update. 

The FadeIn animation will occur once the OnUpdated event is raised by the UpdatePanel.  This will fade the image back to full opacity.

Hope this helps!  Contact me with questions.