Adding Captions to the Slideshow

You ll probably want to add some captions to the slides on your Web page. No problem. A handy way to add the captions is to use a second array to store the caption text and a Label control to display the caption text. Each element of the caption array corresponds to a name in the slideNames array. When you get the slide name, you can also get the corresponding caption, as shown in Figure 5-3.

Figure 5-3: The slideshow with captions.

Add a Label control for captions

1. Add another Label control to the page and put it below the navigation bar.

2. Set the Label control s ID property to labelCaption and clear its Text property. If you want, you can change the Font and ForeColor properties to make the text more visible.

You need to add code to the page to create an array to hold the captions. The code is fairly easy, because it s so similar to the array you created for the slides.

Add code to display captions

1. In Code view, go to the top of the page and add a statement to declare an array named captions to hold the captions. This array should be the same dimension as the slideNames array. The boldfaced line in the following code shows where the declaration appears.

   Dim path As String = "images/ Dim slideNames(5) As Strin Dim captions(5) As String Dim currentSlide As Integer

2. In the Page_Load handler, add statements to assign individual caption text to each element in the captions array, as shown in the boldfaced lines below. Obviously, you can add your own text.

   Sub Page_Load(     path = "images/     slideNames(0) = "Mexico_church1.jpg     slideNames(1) = "Mexico_church2.jpg     slideNames(2) = "Mexico_church4.jpg     slideNames(3) = "Mexico_convent.jpg     slideNames(4) = "Mexico_street1.jpg     slideNames(5) = "Mexico_street5.jpg     captions(0) = "Santo Domingo church"     captions(1) = "The bell tower"     captions(2) = "Another view of the bell tower"     captions(3) = "Interior of convent"     captions(4) = "Typical architecture"     captions(5) = "Local resident"  End Su 

3. To display the current caption in the labelCaption control, add the following line after the code that sets the text of the labelNavbar control:

   labelCaption.Text = captions(currentSlide) 

   The following code shows the buttonNext_Click handler with the code inserted:

   Sub buttonNext_Click(sender As Object, e As Ev entArgs     currentSlide +=      If currentSlide > slideNames.Length - 1  The        currentSlide =      End I     imageSlide.ImageUrl = path & slideNames(cu rrentSlide     Viewstate("currentSlide") = currentSlid     labelNavbar.Text = "Slide " & currentSlide+1 & " of "         & slideNames.Lengt     labelCaption.Text = captions(currentSlide) End Sub

4. Make the same insertion in the Page_Load and the buttonPrevious_Click handlers.

5. Test the page again by pressing F5. This time, you ll see captions displayed for each picture.

Consolidating Your Code

It might have occurred to you that the code you re writing has some repetition. For example, this statement appears three times:

labelCaption.Text = captions(currentSlide)

In fact, the Click handlers for the Next and Previous buttons are more alike than they are different.

Although the repetition doesn t affect the performance of the page, the approach I ve described has a few downsides. One is that it simply involves more typing. More importantly, it makes the code harder to maintain. For example, if you decide to change the name of the Label control for the captions, you need to make a change to three separate but identical lines in the code, and if you miss one, the page will raise an error.

The solution to this type of problem is to create special-purpose routines in the page and then call the routines as required. For example, you can create a Navigate subroutine that contains a single copy of the repetitive lines and then call that routine from points in the page where you navigate. The following code shows what this routine might look like, with the changes boldfaced:

Sub Page_Load(     path = "images/     slideNames(0) = "Mexico_church1.JPG     slideNames(1) = "Mexico_church2.JPG     ⋮     captions(0) = "Santo Domingo church     captions(1) = "The bell tower     ⋮     If IsPostBack = True The          currentSlide = Viewstate("currentSlid e"     Els         currentSlide =          Navigate()     End I End Su Sub buttonNext_Click(sender As Object, e As Ev entArgs     currentSlide +=      If currentSlide > slideNames.Length - 1  The        currentSlide =      End I     Navigate( End Su Sub buttonPrevious_Click(sender As Object, e A s EventArgs     currentSlide -=      If currentSlide < 0 The        currentSlide = slideNames.Length -      End I     Navigate( End Su Sub Navigate(     imageSlide.ImageUrl = path & slideNames(currentSlid e     Viewstate("currentSlide") = currentSlid     labelNavbar.Text = "Slide " & currentSlide+1 &          " of " & slideNames.Lengt     labelCaption.Text = captions(currentSlide End Sub

The overall length of the page code isn t that much less, but the code is more maintainable. If you re comfortable following this kind of threaded logic, where one routine calls another, you should look for opportunities to consolidate your code in this way. In the long term, this approach makes it easier to create the code for your Web pages.