<%@ 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;
}
}
}
No comments:
Post a Comment