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
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;
}
}
}
2 comments:
Very nice my dear, i really like your efforts.
:)
regards,
Khalid Mehmood UAE.
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?
Post a Comment