How To Create Slideshow using UpdatePanel and Timer

In this Post i will show how to create Slideshow using UpdatePanel and Timer Control
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Untitled Page</title>
</head>
<body>
   <form id="form1" runat="server">
       <asp:ScriptManager ID="ScriptManager1" runat="server" />
       <div>
           <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 My Photo Gallery
           </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/1.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>
           <cc1: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>
           </cc1:UpdatePanelAnimationExtender>
       </div>
   </form>
</body>
</html>
• 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 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. 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. 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.
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    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();

    }
    private string RandomImageName()
    {

        Random rand = new Random();

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

        switch (RandomInt)
        {

            case 0:
                return "~/Images/1.jpg";
                break;
            case 1:
                return "~/Images/2.jpg";
                break;
            case 2:
                return "~/Images/3.jpg";
                break;
            default:
                return "~/Images/1.jpg";
                break;

        }


    }
}

15 comments:

  1. Very nice my dear, i really like your efforts.
    :)

    regards,

    Khalid Mehmood UAE.

    ReplyDelete
  2. OK, That's nice!
    I have an issue with some code like yours. I have 3 controls on a page, each of them with code like yours. The timmers run diferent time intervals. whem the tick appens, all the updatepanels are affected with the animation. Any clues on that?

    ReplyDelete
  3. thanks man...g8 work..

    ReplyDelete
  4. very good dear
    its very helpfull for me
    thanks

    ReplyDelete
  5. Sorry.....it,s not at all working 4 asp.net. If u hv any solution then plz reply....

    ReplyDelete
  6. @Aakanksha:Are you getting any error? ...send me your error details at my email address
    santosh.ksingh03@gmail.com

    ReplyDelete
  7. منصور صالحAugust 16, 2011 at 8:50 PM

    thank you

    ReplyDelete
  8. this not workiing for my asp.net.i really need help for my work.plsss

    ReplyDelete
  9. Animation is not working & Picture shows too big although I have reduced the size of the form.. ......plz help...I am using asp .net 3.5

    ReplyDelete
  10. its not working for my asp.net. please help me

    ReplyDelete
  11. its not working for my asp.net. please help me

    ReplyDelete
  12. its not working in Asp.net...so plzz describe it clearly...plzz

    ReplyDelete
  13. @abhishek:open the page in firebug and see the error message

    ReplyDelete
  14. its work super... i need coding for display slideshow from my databse images...thanks in advance..

    ReplyDelete