|
|
I wrote a JavaScript SlideShow function that allows you to display slideshows on your web page.
The advantages to using a slide show script like this, over using an animated gif,
are many. You are able to display jpg files as well as gifs (hence show a
higher quality image). You can add new images to the show without having to build a new
animated gif file. You can also display pictures that all ready exist on your site
without having to double the diskpase requirements by compiling them all into one
large animated gif file .
The SlideShow function displays one image every 5 seconds. You can easily change this to
make it of a longer, or shorter duration. My main interest was to make this easy for you to
use and fully customizable. You should be able to tailor it to display your own images
with a minimum of fuss and bother.
Before you call the function, you need to set up a place on the page
to display you images. To do this create an image tag that has a name assigned to it.
Here is an example of the what I mean:
<![CDATA[
<img src="images/thumbnails/WildFlowerKid_jpg.jpg" name="slidespot" width="75" height="56" border="0" id="slidespot" />
]]>
This defines the location on your web page that all the slideshow pictures will be displayed in.
When you call the SlideShow() function you simply pass this name into it.
Since I specified a width and height all of the pictures
I intend to dsplay will need to have the same dimensions, otherwise they
will be squashed down, or stretched to fit. (if you pictures are or different
sizes, just leave off the width and height attributes
You can start the slide show automatically when a web page has finished loading,
or you can have the user start it by clicking on a button.
In order to start the slide show automatically you need to call the javascript function
with the "onload" event in the BODY tag of your HTML document. The "onload" event
allows you to call a function AFTER the entire page has finished loading.
This lets you wait until after the initial image is loaded in the img tag.
The body tag should look something like this:
<![CDATA[
<BODY bgcolor=white onLoad="SlideShow('slidespot');">
]]>
Notice that the name of the img tag is quoted. This is required, so that the name is sent
as a character string
If you want to activate it with a button click then simply create a button and have it's
onclick event call the function. Here is an example button:
<![CDATA[
<img src="images/thumbnails/GameOver_jpg.jpg" name="slidespot2" width="75" height="56" border="0" align="left" id="slidespot2" />
<form>
<input type="button" value="Click Me to Start" onClick="SlideShow('slidespot2');" />
</form>
]]>
Notice that I used a different name because I am displaying it in a different image tag.
Remember, the name still has to be quoted in order to be seen as a character string.
To get a copy of the actual script, simply select all the below text and copy/paste it somewhere
in between the <head> and </head> tags of your html document or simply "View Source"
of this page and grab it from there. Just remember to change the names of the pictures in the
SlidePic array assignments to point to your own images. Also do not forget to change the
value of totalpics if you have more (or less) than 4 pictures to display.
Have Fun,
Stan Slaughter
<![CDATA[
<script>
var piccnt = 0
var SlidePic = new Array();
SlidePic[1] = 'images/thumbnails/WildFlowerKid_jpg.jpg';
SlidePic[2] = 'images/thumbnails/GameOver_jpg.jpg';
SlidePic[3] = 'images/thumbnails/LifeHouseTS6_jpg.jpg';
SlidePic[4] = 'images/thumbnails/StainGlass11_jpg.jpg';
var totalpics = 4;
function SlideShow(imgName) {
//////////////
// This function performs a slide show. It will display all the images
// in the SlidePic array. Each picture will be displayed for 5 seconds
// before going to the next. They will be displayed where ever the "imgName" img
// HTML tag is defined in the body of your HTML document.
//
// P.S. The images are not preloaded, as they may be quite large and I did not
// want to wait for all of them to load before displaying the page.
//////////////
// Only increament to next picture if the last one has completely loaded
if ( document.images[imgName].complete ) {
// increment counter to see what picture we are on
piccnt++;
// reset counter to fist picture if we have exceeded the total
if (piccnt > totalpics) {
piccnt = 1;
}
// Assign the "imgName" source to be the current picture
document.images[imgName].src = SlidePic[piccnt];
}
// Wait 5 seconds and then call this function again
jsFunction = 'SlideShow("' + imgName + '")';
timerCD = setTimeout(jsFunction,5 * 1000);
}
</script>
]]>
|
|
