- Posted by miketeye on March 19, 2007
Share on FacebookOnce upon a time it was only possible to dabble in stuff like online slide shows if you were a hard core javascript programmer. Well those days are far gone now.
Recently a friend of mine needed a way of projecting some promotional stuff onto a nice and wide plasma screen in his IT Shop. He wanted to do a simple powerpoint presentation for the purpose but when he contacted me for help, I decided to implement a web application to do the job. The steps I took are presented in this post.
It is now possible with the help of Ajax controls and services to implement a practical slide show with just a few lines of code. This is not an attempt to code the nicest and most efficient slide show, this post is simple meant to point anyone researching on how to implement ASP.NET slideshows in the right direction.
Right lets dive in. Its probably good to get a preview of a working demo of my implementation. You can view the slideshow live by clicking this link: slideshow .
In order to simplify the code further I picked up on Nikhil Kothari's AnimatedUpdatePanel as a substitute for the standard UpdatePanel which ships with Ajax. You can learn about the AnimatedUpdatePanel from Nikhil's blog via this link http://www.nikhilk.net/UpdateControls.aspx
I will attach a zipped archive of the code at my earliest convenience.
I wanted a system which will pick images from a folder and present them sequencially as slides in the show. In order to achieve this behaviour, I used a naming convention for the image files by naming them as img-1.gif, img-2.gif etc.
At the heart of the implementation is the Ajax timer control which fires a Tick event per a duration set in milliseconds on its interval property.
The code which serves as the event handler for the tick event is shown below:
Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) HandlesTimer1.Tick
Dim ImageFolder As String = "~/SlideImages"
Dim dir As DirectoryInfo = New DirectoryInfo(Server.MapPath(ImageFolder))
Dim files As FileInfo() = dir.GetFiles("*.jpg")
Dim SlideImage As Image = CType(slidePanel.FindControl("slideImage"), Image)
If Integer.Parse(SlideImage.AlternateText) = (2 * files.Length) Then
SlideImage.AlternateText = "1"
SlideImage.ImageUrl = "~/SlideImages/img-&" & SlideImage.AlternateText &".jpg"
System.Threading.Thread.Sleep(500)
Else
Dim NextIndex As Integer = Integer.Parse(SlideImage.AlternateText) + 1
SlideImage.AlternateText = NextIndex.ToString
SlideImage.ImageUrl = "~/SlideImages/img-&" & SlideImage.AlternateText & ".jpg"
System.Threading.Thread.Sleep(500)
End If
End Sub
The timer control is used to implement an Asynchronous PostBack Trigger on the AnimatedUpdatePanel as in the code below:
The AnimatedUpdatedPanel was perfect for implementing the Cross-fade transition effect. All I had to do to implement the effect was to set the Animation and duration properties as in the code below:
The Animation and duration properties are properties exposed by the AnimatedUpdatePanel which are not available in the Standard UpdatePanel which ships with Ajax RC1.
The contentTemplate of the AnimatedUpdatePanel then contains the Image Control which will serve as the now playing slide as shown in the code below:
The Image control is initialized with the default image which is the img-1.jpg.
As an added little bit of UI appeal, I added a progress control to provide feedback during slide transitions. The code for the progress control is as shown below:
So thats all there is to it. Hope it serves as a starter for you to implement your own improved version.
As promised earlier in this post, you may download the source files:
Ajax Slide show with cross-fade effect download