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.
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.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of
DotNetCurry,
DNC Magazine for Developers,
SQLServerCurry and
DevCurry. He has also authored a couple of books
51 Recipes using jQuery with ASP.NET Controls and
The Absolutely Awesome jQuery CookBook.
Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.
Get in touch with him on Twitter @suprotimagarwal or at LinkedIn