|
|
| Index |
Floating
Transparent SlideShow
(With Fade Transitions) |
Index |
|
| This
script creates a floating layer (scroll the page to see it work), within
which is a sophisticated automatic slide show (including fade transitions)
that cycles through the images that you specify. The slideshow layer can be positioned anywhere
on the screen, and it will float to that position whenever the window is
scrolled. If transparent .gif images are used, the slideshow will
run transparently over the page content. |
Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard. |
|
|
|
Additional Notes
This script, though long, is easy
to install -- just paste the entire code block into your page, just before
the </body tag (not the <body> tag, now, the </body> tag).
Take special care not to let line-breaks intervene anywhere but where shown in
the JavaScript portions of the code!
Remember to set the image path
and size for your image in the section of the code commented as Edit HTML
-- neglecting to do so is one of the most frequent errors.
Remember also to add
onload="runSlideShow()
to the body tag... forgetting this is the second most common error.
Other than that, set the
variables as indicated in the upper section of the JavaScript script.
Positioning is done with the whereX
and whereY variables (see the script). This is a little unusual, so take note:
a negative number in whereX will position horizontally relative to the right of the
screen; whilst a positive number will position relative to the left.
Similarly, in the whereY variable, a negative number will position relative to the
bottom of the screen, whilst a positive one will position relative to the top.
(Keep in mind that you must also allow for the dimensions of the layer.)
Using these two variables,
however; it is possible to position the layer so that it floats in any desired
position on the screen.
If you wish to create the
transparent effect shown here, simply use transparent .gif images, with image
areas that should not be seen set as transparent in your image editor.
.
|
|
|
