It's a common nightmare: you're visiting a friend, and they pull out the slides of their recent trip. "Hey, wanna see some pictures from our summer vacation?"
Or maybe you're the one with the slides, and you don't want to just show the pictures to a few unsuspecting friends—you want to show the entire Web! With this script, you can display both your pictures and the running captions that each gem requires.
The body of the page contains just four elements:
- the image, which will rotate through your amazing collection of photos
- a "previous" link, which will cycle through the images in reverse order
- "next" link, which will cycle through the images in order,
- form with a single textarea field, which will display the caption for the currently displayed image.
I've given the image the name "slideshow", so that we can refer to it later with JavaScript. When the page loads, it displays the image at "images/slideImg0.jpg". Every image in the slide show has the same name except for one difference: the number at the end of the name. Each image has a unique number, starting at zero and increasing by one for each image.
View the example here.
The form is named "imgForm", and the textarea inside the form is named "imgText". This field is set based on the counter "thisImg" and the array "captionText", both of which are initialized in the header script. The array contains one element per image: a string containing the caption for that image. When the page first completes loading, the onLoad handler in the <body> is triggered, which initializes the content of the textarea.
onLoad="document.imgForm.imgText.value = captionText[thisImg]"
The next and previous links each call a function called "newSlide", and pass a single parameter: direction. If your visitor clicks on the "next" link, direction is set to one. If they click on the previous link, direction is set to -1. The direction is added to the thisImg counter, which stores the current image being displayed.
<a href="javascript:newSlide(-1)">Previous</a>
<a href="javascript:newSlide(1)">Next</a>
That's what we see on the page itself, but what's happening behind the scenes? In this case, all the heavy lifting is being done by the function "newSlide". The function starts off by checking to see if "document.images" exist. If it does, we know that our visitor has a browser that understands JavaScript image objects, and therefore, it's okay for us to manipulate the images. If not, the function doesn't do anything at all.
if (document.images) {
Next, it adds direction to thisImg. If your visitor wants to go through backwards, the function subtracts one from the stored value, but if they want to go forward, one is added to the stored value.
thisImg = thisImg + direction
But what happens when we try to go past the end or the beginning? The next few lines take care of these situations. I've decided that in either case, it should just start again at the other end—that is, if the visitor looks at the first image and immediately clicks on the "previous" link, the last image will be displayed. And if they then click on "next", the first image will display again. This is done by comparing thisImg to zero and imgCt, a variable that is set based on how many elements are in the captionText array.
imgCt = captionText.length
if (thisImg < 0) {
thisImg = imgCt-1
}
if (thisImg == imgCt) {
thisImg = 0
}
And now, here's the heart of the script, where the image and the caption are actually changed. The source of the image is reset based on thisImg, combined with the standard required image name. So long as the image name follows the proper format, it will display correctly. Then, the new caption is displayed, based on thisImg as a reference into the captionText array.
document.slideshow.src = "images/slideImg" + thisImg + ".jpg"
document.imgForm.imgText.value = captionText[thisImg]
Now, if you want to add new images to the slide show, all you have to do is add a new caption to the end of captionText, give your image the correct name, drop it into the images folder—and voila! You've added a new slide to your slide show.
One note about image sizes: you may be able to see in the example that all the images are the same size: 240x320. What do you do if not all your images have identical dimensions? In this case, it depends on the browser used by your visitors. If you happen to know that everyone visiting your site is using Internet Explorer, then you can use whatever images you want. IE will just resize the display to fit in the new image. However, Netscape resizes all images to fit in the originally defined space from the img tag. In that case, whether your images are the same size or not, Netscape will make them be the same size. My recommendation is to use your favorite image editor to make all your images the same size, and then you'll know that they're being displayed just the way you want.
Now you know how to create a slide show—have fun! With any luck, those people who would have fallen asleep during your living room slide show presentation will now be so impressed by your JavaScript skills that they'll stick around for the entire show.
