ASP Slide Show



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.

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. 

For all browsers, if scripting is enabled, focus moves to the "Next" 
navigation button 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 to customize 
things a bit. They're all listed at the very beginning of the file 
so you'll have no trouble finding them. Here's a sample of what you're 
likely to find as the default:

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"

-------------------------------------------------------------------------------

Released to the Public Domain
Eric Phelps 2005
http://www.ericphelps.com
 