Introduction
You can create a slideshow with this script. It is not only useful for image presentation - you
can view any HTML content. Just have a look at this example:
|
|
Since version 2.0 the script supports fading as well as sliding from page to page. Click the
 and
 icons to switch
between slide and fade mode.
|
This script was tested with the following operating systems and browsers:
| Windows Vista: | IE 7, Opera 9, Firefox 3 |
If you use another browser or operating system, this script may not work for you - sorry.
Notes
There are some problems with older browsers:
- NN 7 has problems when viewing the slideshow.
- IE 5 on Mac OS doesn't view elements (text etc.) below the slideshow area properly;
they will appear underneath the slideshow area instead.
- Safari 1 on Mac OS seems to have problems with sliding.
- Fading does not work with Opera 7 and IE 5 / Safari 1 on Mac OS.
Usage
First, adapt the contents.js file to your needs. This file contains the contents
for your slideshow.
Then adapt the configuration to your needs and insert these lines into your HTML body where you
want the slideshow to appear:
<script type="text/javascript" src="contents.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
You should also put the following line on top of your HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This is necessary to fix the CSS box model bug of Internet Explorer. Just have a look at the
source code of this page. ;-)
NOTE: The actual width of the slideshow DIV depends on the size of your slideshow contents. You can
of course set the visible slideshow area to any size you wish, but this has no effect on the actual
width. If the actual width is bigger than the width of your browser window, a horizontal scrollbar
might appear. You can avoid this by putting the page with the slideshow script into a frame with
scrollbars turned off.