ASP Slideshow

Create a self-advancing slideshow with no programming! I offer two versions of the ASP slideshow. Both have the same name. It's up to you to rename the files or store them in separate folders. Click the screenshot of the version you want. A description of the ASP slideshow is below the two screenshots.

Top Navigation

Left Navigation

Description

You put text and/or picture and/or sound files in the same folder with the ASP script on your server. Make sure all related files have the same base name (like "flower.jpg" and "flower.txt"). The script will find all related files, sort them, and display each related group of files as a slide in a presentation. Let me say this another way... All you have to do is supply the raw files. A picture, a plain-text file, a sound, or all three. Or two out of three. Whatever you have. You don't have to create web pages or write any scripting. You don't need to know HTML or programming. All you have to do is give your files meaningful and related names, stick some numbers on the front of the file names so they'll sort into the right order, and upload them to your Windows web server.

The "Left Navigation" version creates links to each slide. The link text matches the file name minus the extension and any leading numbers, dashes, and underscores. The "Top Navigation" version does not create links for individual pages. Other than that difference, the scripts are the same. It's a tradeoff between more room with the "Top Navigation" version or better navigation with the "Left Navigation" version.

The generated web pages use client-side JavaScript, but will still work with client-side scripting disabled (unless your browser -- like FireFox -- requires you to have scripting enabled in order to display a sound plugin). The generated web pages use CSS to make the navigation buttons look pretty, but they'll work without CSS.

On Internet Explorer with scripting enabled, slides that have sounds will automatically advance to the next slide as soon as the sound finishes playing. If you're lacking IE, scripting, or sound, then you'll just press the "Next" navigation button to advance to the next slide. NOTE - The IE auto-advance feature works by detecting when the media player plugin goes from the "playing" state to the "stopped" state. This happens at the end of the sound, but it will also happen if you push the media player "stop" button! If you want to stop the media player for any reason, you should always hit the "pause" button (two vertical bars) first.

For all browsers, if scripting is enabled, focus moves to the "Next" navigation button one second after the page loads, so you can use your "Enter" button to go to the next page and your "Backspace" button to go back. For maximum visibility, you might want to tell your viewers to press "F11" (in FireFox and IE, at least) to view the presentation fullscreen. The presentation does NOT attempt to resize the client browser.

There are a few constants in the ASP file you can edit (using Notepad) to customize things a bit. They're all listed at the very beginning of the file so you'll have no trouble finding them. Note that you don't need to change these constants! The presentation should work fine in most cases just the way it is. Here's a sample of what you're likely to find as the default constants:

Const PRESENTATION_TITLE = "Presentation"
Const HOME_PAGE = "../"
Const END_PAGE = "../"
Const IMAGE_ALIGN = "right"
Const TEXT_EXTENSIONS = "txt"
Const PICTURE_EXTENSIONS = "bmp, jpg, jpeg, gif, png"
Const HTM_EXTENSIONS = "htm"
Const SOUND_EXTENSIONS = "mid, wma, au, wav, mp3"
Const BACK_BUTTON = "&#9668"
Const HOME_BUTTON = "&#9650"
Const NEXT_BUTTON = "&#9658"

PRESENTATION_TITLE
    Scroll up and look at the screen captures. Notice the title bar says "Presentation - Page 2 of 17". It'll say that (except for different page counts) on every slide in your slide show. You can replace the word "Presentation" with whatever may be more appropriate.

HOME_PAGE
    If you hit the "Home" button (the center navigation button), this is where you'll go. You can use relative or absolute URLs here. You should choose a URL that is NOT part of the presentation.

END_PAGE
    Here's where you go when you run off the end of the presentation. Like hitting the "Back" when you're at the beginning or "Next" when you're already at the end. Warning... Internet Explorer with scripting enabled will automatically advance off the end of the presentation. So if you decide that the END_PAGE should point back to the first page in the presentation, you'll trap poor IE users in an endless loop. In most cases, the END_PAGE should be the same URL as the HOME_PAGE.

IMAGE_ALIGN
    If you have an image and text that will be displayed on the same slide, the ASP script needs to know how to arrange them. I strongly recommend using "right" here because IE does a really horrible job of wrapping text around images. If the image is pushed to the right (like I suggest), then text -- even with IE's bad wrapping -- will always be visible. Under FireFox, I've snuck in an invisible image to force the text to break below the image if there's less than 150 pixels on the side for the text. On either browser, if you choose "left" for the IMAGE_ALIGN property, a large image might hide part of your text off the right side of your screen. Not good.

TEXT_EXTENSIONS
    When the ASP script is looking for text to wrap around a picture, it will look for text files with these extensions. I can't imagine using anything other than "txt". You should only use plain text files here! That means no Word documents, no RTF files, and no HTM files. If you can't view the file correctly in the "Notepad" program, it shouldn't be on this list.

PICTURE_EXTENSIONS
    When the ASP script is looking for pictures to display in a slide, it will look for image files with these extensions. If (because you're doing some tricky things) you have multiple files with similar names like "flower.jpg" and "flower.png", the file with the extension on the right will be selected. In this case, since the default list is "bmp, jpg, jpeg, gif, png", and "png" is further right than "jpg", then the "flower.png" image would be used to build the slide and "flower.jpg" would be ignored.
    Always try to keep your images small enough to fit on the viewer's browser! You'll have to decide how big this is based on which ASP script you're using (top or side navigation) and on whether you want to leave room for text to be wrapped around the image.

HTM_EXTENSIONS
    Amazingly, htm files can be handled just like pictures. By default, I only have "htm" in the list, but you could add "html" if you wanted. I prefer not to add "html" because I want to be able to use an index page that won't be part of the slide show. By leaving "html" out of the list, I can have an "index.html" file. One thing you should never do is add "asp" to the list! If you do, the ASP script will try (and fail miserably) to add itself to your presentation.
    So -- How do I add an "htm" file as a picture? Well, I read the HTM file and throw away everything that isn't inside the <body> tags. I then stick that into the slide. Pretty simple. This allows you to create an HTM file that may display multiple pictures or an animation or something the ASP script couldn't handle alone. Because I only use the "body" of the HTM file, you'll want to be sure any scripts or meta tags you really need are in the body. You may hate doing it, but it will work, so you'll get over it.

SOUND_EXTENSIONS
    When the ASP script is looking for sounds to play in a slide, it will look for sound files with these extensions. If (because you're doing some tricky things) you have multiple files with similar names like "flower.wav" and "flower.mp3", the file with the extension on the right will be selected. In this case, since the default list is "mid, wma, au, wav, mp3", and "mp3" is further right than "wav", then the "flower.mp3" sound would be played for the slide and "flower.wav" would be ignored.
    Keep in mind that IE will auto-advance to the next slide as soon as the sound finishes playing. So if you have a sound, it should be some decent narration, not just a silly click sound. If there is no sound -- or if the client browser can't play sounds -- then the client browser can dally as long as they like before pressing the "Next" button to go to the next slide.

BACK_BUTTON
    Here's where you decide what the "Previous" navigation button should look like. The default is a left-pointing triangle generated with a unicode character. A button effect is created with CSS code. The button can also be plain text or can be a full graphic image tag. Here's a few alternatives:
Const BACK_BUTTON = "<img border=0 src=http://www.w3.org/Icons/back.gif>"
Const BACK_BUTTON = "<"
Const BACK_BUTTON = "Back"

HOME_BUTTON
    Here's where you decide what the "Home" navigation button should look like. The default is a up-pointing triangle generated with a unicode character. A button effect is created with CSS code. The button can also be plain text or can be a full graphic image tag. Here's a few alternatives:
Const HOME_BUTTON = "<img border=0 src=http://www.w3.org/Icons/house.gif>"
Const HOME_BUTTON = "^"
Const HOME_BUTTON = "Home"

NEXT_BUTTON
    Here's where you decide what the "Next" navigation button should look like. The default is a right-pointing triangle generated with a unicode character. A button effect is created with CSS code. The button can also be plain text or can be a full graphic image tag. Here's a few alternatives:
Const NEXT_BUTTON = "<img border=0 src=http://www.w3.org/Icons/forward.gif>"
Const NEXT_BUTTON = ">"
Const NEXT_BUTTON = "Next"

Sample Shows

http://www.ericphelps.com/linux/bootdisk/

This ASP script is featured at:
ScriptSearch.com under the ASP -- Scripts_and_Components -- Image_Galleries category as the "ASP Slideshow".
ASP Resource Index under the Tutorials & Code Snips -- Graphics & Charts category as the "ASP Slideshow".
Planet Source Code under the ASP/VBScript -- Graphics/Sound category as the "ASP Slideshow".
HotScripts.com under the ASP -- Scripts and Components -- Image Manipulation -- Slide Shows category as the "ASP Slideshow".

Lost? Look at the site map.

Bad links? Questions? Send me mail.