Saturday, May 05, 2007

Complaints About Ajax Control Toolkit: SlideShow

If you are using the Ajax Control Toolkit for ASP.Net you might have noticed that there is an included SlideShow object, see live preview here: http://ajax.asp.net/ajaxtoolkit/SlideShow/SlideShow.aspx

I am currently using this on my website but have run into difficulties that the developers were not able to solve for me on the forums: When you use a SlideShow object you pass in the name of an Asp:Image object to attach to. When the SlideShow shows pictures this is where it will show them. Now here is the issue: If you read the value of the current picture programmatically from the Asp:Image it will not give you the path of the current picture. This information is actually being inserted using Java Script and is not being done in .Net at all! Also, all of the events that you can hook into related to the actual loading/changing of slides for the SlideShow object are all Java based events and there is no built in hooking of them with C#. So if you want to do something in Code based upon the current picture, like in my case add the ability for the user to rate the currently shown picture, you can't do it, or at least not with any ease.

But there is a solution: role your own SlideShow. This is actually incredibly easy to do. Here's what you need:
  • Write a class, static or not, that will return to you a collection of strings in a string array. Each string will be the path to an image to display in our SlideShow.
    • I did this by reading in a list of all *.jpg files in a folder and then for each file adding it's path as a new string in the array. You can use the value of the number of file entries found to set the size of the string array.
  • Create a new CustomControl. Add to it an UpdatePanel, inside the UpdatePanel add a Timer and have it tick every 5000 or so, so 5 second intervals. Also add an Asp:Image.
  • Create a Timer onTick event and a page load event.
  • In the onLoad event load from your class the list of files to display. You will need to create two object level variables: a string array to hold the list and an int to keep track of our position. Store the returned string array in the string array variable and set the int to 0.
  • Now on tick check to see what the current position in the list is. If our int == length of our array then set it to 0 again to start over. Otherwise int++. Finally set the Asp:Image's Image URL property *I think that's what it's called* to the value of string_array[int]. That's all there is to it.
Maybe I'll post the code to this at some point. Note that this assumes you already have ScriptManager on the parent page.

No comments: