Aspdotnetcodebook

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;

        }


    }
}

14 comments:

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

regards,

Khalid Mehmood UAE.; April 26, 2009 at 4:50 AM
Daniel Reis said...: 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?; July 29, 2009 at 8:32 PM
Eldhose said...: thanks man...g8 work..; March 22, 2010 at 10:17 PM
mahesh said...: very good dear
its very helpfull for me
thanks; March 15, 2011 at 3:54 AM
Aakanksha said...: Sorry.....it,s not at all working 4 asp.net. If u hv any solution then plz reply....; May 6, 2011 at 9:10 AM
santosh said...: @Aakanksha:Are you getting any error? ...send me your error details at my email address
santosh.ksingh03@gmail.com; May 6, 2011 at 10:13 AM
منصور صالح said...: thank you; August 16, 2011 at 8:50 PM
sadiq said...: this not workiing for my asp.net.i really need help for my work.plsss; January 22, 2012 at 3:48 AM
sourav said...: 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; April 6, 2012 at 9:24 AM
srihari said...: its not working for my asp.net. please help me; May 1, 2012 at 10:41 PM
srihari said...: its not working for my asp.net. please help me; May 1, 2012 at 10:52 PM
abhishek said...: its not working in Asp.net...so plzz describe it clearly...plzz; July 23, 2012 at 2:39 AM
santosh said...: @abhishek:open the page in firebug and see the error message; July 23, 2012 at 4:21 AM
srigates said...: its work super... i need coding for display slideshow from my databse images...thanks in advance..; February 21, 2013 at 11:42 PM