Dynamic Slideshow of images using Ajax Toolkit

• Download DynamicSlideshow.zip - 1,016.4 KB

Introduction

Recently, i have been trying out various things in Ajax Toolkit. I tried out the Slideshow concept and it worked out fine, but that code needs the image paths to be hard coded, so i thought what if i want to dislpay all the files in a particular folder dynamically? I worked on that and got it. I am presenting it here so that it may be useful for someone.

Background

To work with this code you should have Ajax Toolkit installed. This example uses Ajax Toolkit

Using the code

//With in the form beginning & closing tags place the following code



<div> <script runat="server" type="text/VB"> 
<System.Web.Services.WebMethod()> _
<System.Web.Script.Services.ScriptMethod()> _
Public Shared Function GetSlides() As AjaxControlToolkit.Slide()Dim ObjUIPage As New System.web.ui.page
Dim i As Integer = 0
Dim j As Integer 


//The below line specifies the Directory to be used.Here the images are in images folder of my application 



Dim DirInfo As New System.IO.DirectoryInfo(ObjUIPage.Server.MapPath("") & "\images")
Dim subDirs As System.IO.DirectoryInfo() = DirInfo.GetDirectories()


//The below line gets the list of files in the directory specified above 



Dim Files As System.IO.FileInfo() = DirInfo.GetFiles()


//The below line gives the file count, which is useful to specify the size of array 




j = Files.Length
Dim mySlides() As Slide = New AjaxControlToolkit.Slide(j) {}
Dim di As System.IO.FileInfo



//This loop continues upto the last file in the directory 




For Each di In Files
mySlides(i) = New AjaxControlToolkit.Slide(di.FullName, di.Name, di.Name.Substring(0,(
di.Name.IndexOf(".")))Next diReturn mySlides 
i = i + 1
Next di


//this line sends the dynamically added details as AjaxControlToolkit.Slide 



End Function 
</script> 


<asp:ScriptManager runat="server" ID="SideShow" ></asp:ScriptManager>
<asp:Label runat="Server" ID="imageTitle" CssClass="slideTitle"/><br />
 <asp:Image ID="Image1" runat="server" Height="300" Style="border: 1px 
solid black;width:auto" ImageUrl="images/Blue hills.jpg" 
AlternateText="Blue Hills image" />
 <asp:Label runat="server" ID="imageDescription" CssClass="slideDescription">
</asp:Label><br /><br /> 
<asp:Button runat="Server" ID="prevButton" Text="Prev" Font-Size="Larger" />
 <asp:Button runat="Server" ID="playButton" Text="Play" Font-Size="Larger" />
 <asp:Button runat="Server" ID="nextButton" Text="Next" Font-Size="Larger" />
 <ajaxToolkit:SlideShowExtender ID="SlideShowExtender1" runat="server"
 TargetControlID="Image1" AutoPlay="true" ImageTitleLabelID="imageTitle" 
SlideShowServiceMethod = "GetSlides" 
ImageDescriptionLabelID="imageDescription" NextButtonID="nextButton" 
PlayButtonText="Play" StopButtonText="Stop" PreviousButtonID="prevButton"
 PlayButtonID="playButton" Loop="true" /> </div> 
//