HTMLfixIT.com Contributor tutorial.
By Hazel on 03:03:2004


How to create a simple fast loading JavaScript Slideshow

This simple little javascript slideshow has been created by Don and Franki adapting several scripts together.  They came up with this really excellent and fast loading Slideshow that caters for those using dialup connections as well as broadband.

Incuded in this script is a function for preloading your images.  It is a good idea to make your image file size as small as possible.  This can be done in most good graphics programs which optimise pictures specially for putting in web pages.

I will demonstrate with just 3 very small pics as follows:-

Pic 1 Pic 2 Pic 3

1) Assemble your pictures

These do not have to be the same size, if they are not you will need to change your settings in the script to fit the largest one, (although it should be said that it looks better when they are the same size.)   I've just used very small ones the same size for fast loading for this tute!

2) Place the code below between the <head > and </head > on in your page.

This is done by clicking on Select all (the script will then be highlighted) and then Edit/Copy (Ctrl+C) open the page you want the script in, and go to Edit/Paste (Ctrl+V).

Select all

3) Place the code below between the <body > and </body>  tags of your page.
Using the same method as above.
(I have used position:absolute; in this case to move the slideshow to the left.  To center it you will need to use position:relative;)

Also, in the code below are the actual slideshow image paths, you should edit them to suit your own slideshows, and add more as needed.
When you add new images, you need to be sure and get the image number correct. for example if this is the last image in the list:

img[2]='<img src="images/slideshow/pic3s.jpg" border="0" /><br />Digger with Spade';

And you wish to add another, you need to increment the img[2] by one, so the next image path would look like this:

img[3]='<img src="images/slideshow/newpic.jpg" border="0" /><br />A new image';

Select all

4) Place the code below between the <body > and </body>  tags  just below the above script.

Again using the same method as above, and add a new line for each image in your sideshow.

Select all



Of course replace the pictures and text with your own in the script in box 3

You can also slow down or speed up your slideshow, by going to the - setTimeout("bannerRotate()", 4000); part of your script.  4000 means 4 seconds, 5000, 5 seconds and so on.  Thats it your'e done.

Easy isn't it!

I have to say that for me this fairly "idiot proof" and clear script worked really well and I hope that you too will find it very useful.

Hazel

http://www.dogpage.ision.co.uk
http://www.freemax-associates.co.uk
http://www.novu.co.uk


Valid XHTML 1.0!