Chris Manciero.com

Create an Image SlideShow

This slideshow was created using Asp.Net Ajax controls. The SlideShowExtender control was used with an Asp.Net image control. Using the Asp.Net Ajax controls makes the slideshow work very easy.

(This tutorial assumes you already downloaded and installed the Asp.Net Ajax Essentials and the Asp.Net Ajax Control Toolkit)

1. You want to make sure that one and only one ScriptManager control is on the page.
   
   
2. You want to add an Asp.Net image control. Make sure to set the ImageUrl="location of first image".
   
   <asp:Image ID="imgPhotos" runat="server" Height="300" Style="width:auto; border:solid 1px #000000;" ImageUrl="~/photos/100_0719.JPG" />
   
   
3. Add 3 Asp.Net buttons as they will be the buttons that the SlideShowExtender will use to control the slide show.
   
   <asp:Button ID="btnPrev" Text="Prev" runat="server" />
   <asp:Button ID="btnPlay" Text="Play" runat="server" />
   <asp:Button ID="btnNext" Text="Next" runat="server" />
   
   
4. Add the SlideShowExtender control. Here is an example to what I set the attributes to.
   
   <ajaxToolkit:SlideShowExtender ID="SlideShowExtender1"
   runat="server"
   TargetControlID="imgPhotos"
   SlideShowServiceMethod="GetSlides"
   SlideShowServicePath="MyWebService.asmx"
   AutoPlay="true"
   NextButtonID="btnNext"
   PlayButtonText="Play"
   StopButtonText="Stop"
   PreviousButtonID="btnPrev"
   PlayButtonID="btnPlay"
   Loop="true"/>
   
   
5. Now create your webservice. (If you don't know how to create a webservice.)
   
   [WebMethod]
   [System.Web.Script.Services.ScriptMethod]
   public AjaxControlToolkit.Slide[] GetSlides()
   {
   string[] fileNames = System.IO.Directory.GetFiles(Server.MapPath("photos"));
   AjaxControlToolkit.Slide[] photos = new AjaxControlToolkit.Slide[fileNames.Length];
   for (int i = 0; i < fileNames.Length; i++)
   {
   string[] file = fileNames[i].Split('\\');
   photos[i] = new AjaxControlToolkit.Slide("photos/" + file[file.Length - 1], "", "");
   }
   return photos;
   }
   
   Here's how it works:
   
   First - The names of files located in the "photo" folder are stored in an array.
   
   Next - An AjaxControlToolkit.Slide[] named photos is created with the length of files found in the folder.
   
   Third - A for loop is used to add new Slides to the photos array.
   
   Last - The array is return to be loaded in the SlideShowExtender control.
   
   This is just one of the ways you can load the images into the slide array. I use this way cause when I want to add more images to the slideshow I can just upload them to the "photos" folder and the images will be displayed in the slideshow.

So there you have it. Easy steps to follow to create a slideshow on your site.