Basic Slideshow Slide one picture at a time or have them rotate automatically ~ Tested in IE6.0, Netscape7.02, Netscape8.0.4, Opera8.51, Firefox1.0.7 and AOL Explorer1.2

T his is another quite simple slide show code depending on your knowledge of HTML and Java scripts. First you need to have your images or pictures uploaded into your editor. Then you can "copy & paste" the one part code into the <BODY> section of your document. The only reconfiguration needed is to replace the default path to the images to that of your uploaded images. You add you images into the script as shown below.

W e have tested the code in IE6.0, Firefox1.0.7, Opera8.51, Netscape7.02, Netscape8.0.4 and AOL Explorer1.2. This script worked in all platforms with the exception of Netscape7.02 where the pictures will not be visible and the slideshow will not work. It degrades well and you will not get any error messages.

Make The Reconfigurations Below

////configure below variables/////////////////////////////

//configure the below images and description to your own.
g_ImageTable[g_imax++] = new Array
("Path To You Image", "Image Description Here");
g_ImageTable[g_imax++] = new Array
("Path To You Image", "Image Description Here");
g_ImageTable[g_imax++] = new Array
("Path To Your Image", "Image Description Here");
g_ImageTable[g_imax++] = new Array
("Path To Your Image", "Image Description Here");
g_ImageTable[g_imax++] = new Array
("Path To Your Image", "Image Description Here");
//extend the above list as desired
g_dwTimeOutSec=2

////End configuration/////////////////////////////

O nce that is done the only other thing in the code you may want to change is the time set to ratate each picture. See below on where and how this is done. Remember, 1000 equals 1 second, 2000 equals 2 seconds etc.

function OnImgLoad()
{
if (g_fPlayMode)
window.setTimeout("Tick()", g_dwTimeOutSec*3000);
}
function Tick()

Y ou can add or subtract the number of pictures you want to use. Just follow the format and be sure all new pictures are inserted above these below two lines of script.

//extend the above list as desired
g_dwTimeOutSec=2

D o not change anything else in the code or it will not work. A little note on picture size. You need to have the pictures the exact pixel size or the text will move as the pictures change. All these pictures may look different sizes but in reality they are identical in size. We used a black matte behind them to get them exactly the same pixel size.

W hy the text will move is actually quite simple. The code is a constant. If the sizes within the constant (code) change the constant has to move to compensate the change. So in reality the constant is pushing whatever is around it to make room for the constant (code).

I you would like to add this effect into your pages, grab the respective below link and you are there. We hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

Little Tips Directory

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.

Basic Slide Show