Chapter 5: Creating a Simple Slideshow

In this chapter, you ll create a Web page that displays photos and allows users to click Previous and Next buttons to navigate between them in other words, you ll create a slideshow page. Creating the slideshow page will allow you to apply the basic Web programming skills that you learned in Chapter 4. You ll learn how to store a list of pictures in the page. You ll also be introduced to the first of several techniques for storing information between round trips of the page.

How the Slideshow Works

To give you an overview of the slideshow program you ll be creating with Web Matrix, I ll explain what the slideshow will contain and what functions it will accomplish:

• It will contain a list of the pictures you want to display. The list will be hard-coded into the page. In Chapter 12, I ll show you another, more flexible way to establish what pictures to show.

• It will allow users to click Next and Previous buttons to move back and forth between the slides.

• It will keep track of the current slide. As you create this feature of the slideshow program, you ll learn how to work with state management.

• It will automatically redisplay the first slide after you ve seen the last slide that is, it will wrap around.

Once you ve gotten the basic slideshow working, you ll create a fancier navigation bar that tells users what slide they re on (slide 2 of 6, for example). You ll also add captions to the slides.

Incidentally, the slideshow won t have a timer it s strictly manual navigation. Your page will use manual navigation because you can t directly create a timer in server-based code. A timer requires that a program be running to count down the seconds. But remember that on the server, the page disappears as soon as it s been sent to the browser, along with its code. So no code is left to perform the timer countdown. If you want a timer on the page, you need to code it in client script and run it in the browser. Because we re primarily focused on server code in this chapter, we won t address how to code the timer here.