Fading Slideshow Tutorial


Creating a fading image slideshow like the one above is really quite simple. All it involves is copying & pasting a JavaScript code into the body area of your webpage coding, and editing a few lines in accordance with the images you are using. You can use as many images as you want, but one very important rule applies : ALL IMAGES USED MUST BE THE SAME SIZE IN WIDTH AND HEIGHT.


Now let's go through all the necessary steps :

1. Download the following zipped text file to your computer. Unzip the zip file to obtain the text file. Copy & Paste the JavaScript code contained in the text file, between the BODY tags of your webpage coding, wherever you wish the slideshow to be located.
Slideshow Code

2. Change the following lines in accordance with your own images :

(var slideshow_width='246px' //SET IMAGE WIDTH) - in this line change the number "246" to the width size of your own images.

(var slideshow_height='266px' //SET IMAGE HEIGHT) - in this line change the number "266" to the height size of your own images.

(var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)) - in this line change the number 3000 to change the pause time between images. It can be changed to higher numbers, such as 4000, or 5000, etc. to lengthen the pause, or to lower numbers, such as 1000, or 2000, to shorten the pause.

(fadeimages[0]="flowers1.jpg") - change these image lines in accordance with your own image file name. Change "flowers1.jpg" to the name of your own image. There are presently 4 of these lines in this code, but if you wish to add more images to your slideshow, simply type in more of these lines, making sure to properly number them in sequence, starting at 0 as you see here.

Those are the only necessary changes. As you can see it really is quite simple, but by using your own creativity you can create stunning fading slideshow effects.

Charm's Graphics Shack