Click here to Skip to main content
15,885,757 members
Articles / Web Development / HTML
Article

An ASP.NET Slide Show

Rate me:
Please Sign up or sign in to vote.
3.43/5 (30 votes)
30 Mar 2006CPOL1 min read 351.9K   14K   78   73
A simple slide show using AJAX in ASP.NET.

Introduction

I had been looking for the source of a web-based slide show for my own use. The features I wanted in my slide show pages were that it should dynamically select a picture in the server to display, it should display some transition effects, and it should not cause page refreshing. But I couldn’t find one of this kind. So I decided to code it myself.

There is a lot of source code to make the transition effect using JavaScript. But to address the dynamic selection of the picture to display and to avoid the page from refreshing, I used AJAX. There are a lot of AJAX frameworks and tools out there to choose from. But for this simple task, I just used the ASP.NET2’s built-in AJAX supported class System.Web.UI.ICallbackEventHandler.

The included source code will demonstrate the use of this class, and also how to use JavaScript to make the request to get the next image file and apply the transition effects. One thing I need to mention is when applying transition effects, the next image has to be completely loaded before playing the effect, otherwise, the picture display will not be smooth and will be flickering. I also address this in my JavaScript code.

In fact, this is a part of my photo album web project. For the live demo of the slide show in my photo album, click here.

Using the code

To use the source, unzip the project files to a folder, load the Slideshow.sln in Visual Studio 2005, and run it.

Hope my post is useful to you. Enjoy!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralRe: No thumbnails Pin
EdwardJr21-Aug-07 10:03
EdwardJr21-Aug-07 10:03 
QuestionWeb Photo Album Pin
sides_dale28-May-07 15:53
sides_dale28-May-07 15:53 
AnswerRe: Web Photo Album Pin
Lang Deng29-May-07 13:39
Lang Deng29-May-07 13:39 
GeneralMaster Page Pin
alexaz17-May-07 9:18
alexaz17-May-07 9:18 
GeneralRe: Master Page Pin
Lang Deng7-May-07 14:56
Lang Deng7-May-07 14:56 
GeneralDoesn't work in Firefox Pin
GaryWoodfine 23-Feb-07 0:08
professionalGaryWoodfine 23-Feb-07 0:08 
QuestionDose not support mozilla browser Pin
gurusewack12-Jan-07 21:13
gurusewack12-Jan-07 21:13 
AnswerRe: Dose not support mozilla browser Pin
GaryWoodfine 23-Feb-07 15:07
professionalGaryWoodfine 23-Feb-07 15:07 
To get this to work in firefox you will have to change the transitions things.

document.getElementById("ctl00_ContentPlaceHolder1_photo").style.filter = wds[1];

this line here needs to checked.


Kind Regards,
Gary


My Website || My Blog || My Articles

QuestionAjax slideshow Pin
Donald Shaw31-Dec-06 16:32
Donald Shaw31-Dec-06 16:32 
AnswerRe: Ajax slideshow Pin
Lang Deng1-Jan-07 8:41
Lang Deng1-Jan-07 8:41 
QuestionBanding of image at bottom Pin
Yoojin8-Dec-06 8:52
Yoojin8-Dec-06 8:52 
Generalusing slideshow 3 times on one page Pin
lennied5-Dec-06 23:50
lennied5-Dec-06 23:50 
GeneralRe: using slideshow 3 times on one page Pin
Lang Deng6-Dec-06 21:31
Lang Deng6-Dec-06 21:31 
GeneralRe: using slideshow 3 times on one page Pin
lennied6-Dec-06 23:52
lennied6-Dec-06 23:52 
Generalgetting an error when servers wants to upload next image [modified] Pin
lennied5-Dec-06 2:52
lennied5-Dec-06 2:52 
QuestionRe: getting an error when servers wants to upload next image [modified] Pin
Donald Shaw1-Jan-07 13:33
Donald Shaw1-Jan-07 13:33 
GeneralDoesn't work at all in Firefox Pin
cbgthree26-Nov-06 11:11
cbgthree26-Nov-06 11:11 
GeneralRe: Doesn't work at all in Firefox Pin
Lang Deng26-Nov-06 11:37
Lang Deng26-Nov-06 11:37 
AnswerRe: Doesn't work at all in Firefox Pin
Donald Shaw1-Jan-07 11:41
Donald Shaw1-Jan-07 11:41 
GeneralRe: Doesn't work at all in Firefox Pin
yannlh17-Jan-07 16:51
yannlh17-Jan-07 16:51 
GeneralRe: Doesn't work at all in Firefox Pin
alkm12023-Apr-07 3:00
alkm12023-Apr-07 3:00 
GeneralRe: Doesn't work at all in Firefox Pin
Azul SkyKnight6-Jun-07 6:33
Azul SkyKnight6-Jun-07 6:33 
GeneralRe: Doesn't work at all in Firefox Pin
Doan Quynh13-Nov-07 5:05
Doan Quynh13-Nov-07 5:05 
GeneralRe: Doesn't work at all in Firefox Pin
Azul SkyKnight16-Nov-07 4:34
Azul SkyKnight16-Nov-07 4:34 
Generalusing slideshow Pin
kurt11178023-May-06 3:24
kurt11178023-May-06 3:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.