Wednesday, October 19, 2011
ASP.NET AJAX SlideShow Extender - Some Common Tips and Tricks
SlideShow is cool extender control that comes with the ASP.NET AJAX control toolkit and can be used to create a Slide show by looping images in a round robin fashion. The images are configured with the SlideShow by using a PageMethod or a webservice. In this article, we will see common tips and tricks while using the SlideShow Extender control. In this article, I assume that you are familiar with the SlideShow Extender. If you want to know more about this control, check the documentation over here.
The Ajax Control Toolkit is a separate download that is built on top of the Microsoft ASP.NET Ajax framework. The toolkit allows you to create extenders and controls to enhance the current ASP.NET server controls.
The toolkit can be downloaded from http://tinyurl.com/ajax-toolkit. Information on how to install the toolkit can be found athttp://tinyurl.com/toolkit-info. Let us get started.
How to create a Slide Show with images kept on your local disk using the ASP.NET AJAX SlideShow Extender
Here’s a simple demonstration of creating a Slide Show with the images on your disk, using the ASP.NET AJAX SlideShow Extender. I have created an ASP.NET 3.5 website. Drag and drop the SlideShow Extender from the AJAX Control Toolkit on to the page. Create a folder called ‘images’ in your project and add some images to them. After setting a few properties on the SlideShow, the markup would look similar to the following.
<%@ 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.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
margin:50px 0px; padding:0px;
text-align:center;
}
.Image
{
width:475px;
margin:0px auto;
text-align:center;
padding:20px;
border:1px dashed gray;
background-color:Silver;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="Image">
<asp:Image ID="img1" runat="server"
Height="400px" Width="400px"
ImageUrl="~/images/Autumn Leaves.jpg" />
</div>
<cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"
BehaviorID="SSBehaviorID"
TargetControlID="img1"
SlideShowServiceMethod="GetSlides"
AutoPlay="true"
ImageDescriptionLabelID="lblDesc"
NextButtonID="btnNext"
PreviousButtonID="btnPrev"
PlayButtonID="btnPlay"
PlayButtonText="Play"
StopButtonText="Stop"
Loop="true" >
</cc1:SlideShowExtender>
<div>
<asp:Label ID="lblDesc" runat="server" Text=""></asp:Label><br />
<asp:Button ID="btnPrev" runat="server" Text="Previous" />
<asp:Button ID="btnPlay" runat="server" Text="" />
<asp:Button ID="btnNext" runat="server" Text="Next" />
</div>
</div>
</form>
</body>
</html>
As shown in the markup, the SlideShow requires a PageMethod called GetSlides that will be called to supply images. Add the following PageMethod GetSlides() in your Default.aspx.cs or .vb that returns a Slide array to the SlideShow Extender control
C#
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides()
{
AjaxControlToolkit.Slide[] imgSlide = new AjaxControlToolkit.Slide[4];
imgSlide[0] = new AjaxControlToolkit.Slide("images/Autumn Leaves.jpg","Autumn","Autumn Leaves");
imgSlide[1] = new AjaxControlToolkit.Slide("images/Creek.jpg","Creek","Creek");
imgSlide[2] = new AjaxControlToolkit.Slide("images/Desert Landscape.jpg", "Landscape", "Landscape");
imgSlide[3] = new AjaxControlToolkit.Slide("images/Dock.jpg","Dock","Dock");
return (imgSlide);
}
VB.NET
<System.Web.Services.WebMethod, System.Web.Script.Services.ScriptMethod> _
Public Shared Function GetSlides() As AjaxControlToolkit.Slide()
Dim imgSlide(3) As AjaxControlToolkit.Slide
imgSlide(0) = New AjaxControlToolkit.Slide("images/Autumn Leaves.jpg","Autumn","Autumn Leaves")
imgSlide(1) = New AjaxControlToolkit.Slide("images/Creek.jpg","Creek","Creek")
imgSlide(2) = New AjaxControlToolkit.Slide("images/Desert Landscape.jpg", "Landscape", "Landscape")
imgSlide(3) = New AjaxControlToolkit.Slide("images/Dock.jpg","Dock","Dock")
Return (imgSlide)
End Function
When you run the application, you can see a Slide Show of the images as shown below.
Smooth and Simple!
How to change the time interval between slides at runtime in the ASP.NET AJAX SlideShow Extender
A simple yet effective way is to use JavaScript.
To do so, first add one textbox(txtInterval) and a HTML button control to the page. On clicking the button, the time value in the textbox will be passed to a JavaScript function called changeSlideTime(). In this function, we will retrieve the behavior id of the SliderExtender and then use the set_interval() method of the timer, to increase or decrease the play duration between two slides.
<div>
<asp:TextBox ID="txtInterval" runat="server"></asp:TextBox>
<input id="btnChangeTime" type="button" value="Change Time" onclick="changeSlideTime()" />
</div>
Add the following JavaScript code in the <head> element of your page. The code uses the set_interval() function of the timer to change the Time Interval in between two slides.
<script type="text/javascript">
function changeSlideTime() {
var slide = $find('SSBehaviorID');
var txt = $get('<%=txtInterval.ClientID%>').value;
if(txt > 0 && txt != null)
slide._timer.set_interval(txt);
}
</script>
Note: The Time duration is to be supplied in milliseconds. So to create a play duration of 10 seconds between two slides, pass a value of 10000.
How to Skip certain Slides based on a condition in the ASP.NET AJAX SlideShow Extender
In order to skip slides based on a certain condition, use the slideChanging event and specify the slide index to be skipped. Then use the set_cancel(true) to skip the slide as shown below:
<script type="text/javascript">
function pageLoad() {
var slide = $find('SSBehaviorID');
slide.add_slideChanging(skipSlides);
}
function skipSlides(sender, args) {
var idx = args.get_slideIndex();
// Specify your condition over here
if (idx == 2)
args.set_cancel(true);
}
</script>
How to Fade In Fade Out Images in the ASP.NET AJAX SlideShow Extender.
Raymon Wen demonstrated a way to create animations with images in the SlideShow Extender using AnimationExtenders. Add an AnimationExtender from the AJAX Control Toolbox to the page. Configure the FadeIn FadeOut sequences as shown in the mark up over here:
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="Image">
<asp:Image ID="img1" runat="server"
Height="400px" Width="400px"
ImageUrl="~/images/Autumn Leaves.jpg" />
</div>
<cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"
BehaviorID="SSBehaviorID" TargetControlID="img1"
SlideShowServiceMethod="GetSlides" AutoPlay="true"
ImageDescriptionLabelID="lblDesc" NextButtonID="btnNext"
PreviousButtonID="btnPrev" PlayButtonID="btnPlay"
PlayButtonText="Play" StopButtonText="Stop"
Loop="true" >
</cc1:SlideShowExtender>
<cc1:AnimationExtender id="MyExtender" runat="server" BehaviorID="ae"
TargetControlID="img1">
<Animations>
<OnLoad>
<Sequence>
<FadeOut Duration="0" Fps="20" />
<FadeIn Duration="0" Fps="20" />
</Sequence>
</OnLoad>
</Animations>
</cc1:AnimationExtender>
<div>
<asp:Label ID="lblDesc" runat="server" Text=""></asp:Label><br />
<asp:Button ID="btnPrev" runat="server" Text="Previous" />
<asp:Button ID="btnPlay" runat="server" Text="" />
<asp:Button ID="btnNext" runat="server" Text="Next" />
</div>
<div>
<asp:TextBox ID="txtInterval" runat="server"></asp:TextBox>
<input id="btnChangeTime" type="button" value="Change Time" onclick="changeSlideTime()" />
</div>
</div>
</form>
</body>
</html>
Now in the <head> section of the page, add the following JavaScript code to play the animation during the slideChanging event as shown below:
<%@ 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.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
margin:50px 0px; padding:0px;
text-align:center;
}
.Image
{
width:475px;
margin:0px auto;
text-align:center;
padding:20px;
border:1px dashed gray;
background-color:Silver;
}
</style>
<script type="text/javascript">
function pageLoad() {
var slide = $find('SSBehaviorID');
slide.add_slideChanging(animateSlides);
var ae = $find("ae");
var be = ae.get_OnLoadBehavior();
var an = be.get_animation();
fadein = an.get_animations()[1];
fadeout = an.get_animations()[0];
fadein.set_duration(1.0);
fadeout.set_duration(1.0);
}
function animateSlides() {
fadein.play();
window.setTimeout("fadeout.play()", 2000);
}
</script>
</head>
I hope you enjoyed these tips with the SlideShow Extender control. If you have used any useful hacks or tips with this control, use the comments section to share it with the viewers. I hope you liked the article and I thank you for viewing it.
