View Full Version : Slide Show help : /

04-04-2003, 03:17 PM
Hi Everyone,

I'm trying to add a slide show to a message board but I don't really know how to. On my message board, I have a picture on the very middle top of the page and I wanted it to run as a slide show. I've looked into certain sites to find HTML codes for that but since I don't really comprehend those codes, I can't seem to see where there might be an error when I apply certain info to the codes. Can someone kindly help me with that? Thank you!!

Here is the codes that I have: (if you have other easy codes for slide shows, I'd greatly appreciate that as well)
//-->Beginning of slide show-->>



Set up the caption font in the following style.
Place the style script in the head of the page.

.Caption {
font-family: Arial;
font-weight: bold;
color:_____ #FFFFFF;

Place the following script in the head of the page.
Follow the set-up instructions within the script.


// (C) 2002 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.

// ==============================
// Set the following variables...
// ==============================

// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 3;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

Picture[1]_ = '3T_N1b.bmp';
Picture[2]_ = 'Taj_N1b.bmp';
Picture[3]_ = 'Taryll_N1b.bmp';
Picture[4]_ = 'TJ_N2b.bmp';

// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!

Caption[1]_ = "The 3T's.";
Caption[2]_ = "Taj Jackson.";
Caption[3]_ = "Taryll Jackson.";
Caption[4]_ = "T.J. Jackson.";

// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);



Add the onload=runSlideShow() event call to the body tag.

<body onload=runSlideShow() bgcolor=#000000>

The following table holds the images and captions.
Place the table in your page where you want the slideshow
to appear._ Follow the instructions for each table cell.

<table border=0 cellpadding=0 cellspacing=0">
_ <tr>
___ <!--
___ The next table cell holds the images.
___ Set cell and image width and height the same.
___ The img src must have name=PictureBox in its
___ tag._ Usually the first image in the Picture
___ array in the script is used here.
___ //-->
___ <td width=350 height=280>
___ <img src="http://www.xsorbit4.com/users/tttkatia/Attachment/3T_N1b.bmp" name=[1][2][3][4]=350 height=280>
____ </td>
_ </tr>
_ <tr>
___ <!--
___ The next table cell holds the captions.
___ This table cell must have id=CaptionBox and
___ class=Caption in its tag. The default caption
___ shows whilst loading in all browsers; NS4
___ will show only the default caption, throughout.
___ //-->
___ <td id=CaptionBox class=Caption align=center bgcolor=#CCCC66>
___ The 3T Lounge Forum.
___ </td>
_ </tr>



<<--!End of slide Show-->>

There are instructions in this too as you can see. It had mentioned something about preloading the images...Can someone explain that? I want to use pictures that already are linked to a website to make my slide show....possible or not?

Any help is appreciated. Thank you! : )


04-04-2003, 04:28 PM
I've got a slideshow script that's easy, but, I haven't yet incorporated IE's visual transitions. Is that something you really want? If so, maybe I can stick it in today ;)

04-04-2003, 05:04 PM
Hi Beetle,

I would appreciate that very much thank you. If it's not too much to ask today would be great but of course, no rush :). Thanks again!


04-04-2003, 05:18 PM
just name an image and set intervals to go through an array and change it.

img[1] =
img[1] =



for (i=0;img.lenth;i++){
slideshow.src = img[i]

<img id="slideshow">


04-04-2003, 05:39 PM
Piece of cake


Only needed to add about 10 lines of code.

04-04-2003, 06:04 PM
Thank you very much! I'm looking into it now....remember, I don't really know HTML that much, lol...so those codes look a bit confusing to me...I'll let you know if I get it to work. Thanks again! :)


04-04-2003, 06:08 PM
Make sure to download both js files, and feel free post here about getting your own show running.

04-04-2003, 06:57 PM
Hi again Beetle,

I want to run the slideshow on a message board and someone told me that I can't....can you check this link and tell me if i can or can't? lol Thanks again...



PS. The pic at the very top is the pic that I want to run as a slide show...along with 3 other pics (which are not shown since I can't get to run the slide show yet)

04-04-2003, 07:04 PM
I don't see why you can't. How much control do you have over the source-code in the page? Can you give the image an id?

Who told you that you can't?

04-04-2003, 07:12 PM
I don't know how much control I have really...I've used some other codes and they don't all work. The tech people of that site told me they use cgi/perl language. How do I find out if i can give an image an id? coz i don't know if i can or can't...

My fiance told me that I can't use the slideshow there, maybe he doesn't understand what I want to do, lol...but oh well :).

Thanks again for your help...


04-04-2003, 08:26 PM
Well, if you can edit the HTML output, then this will work. I see the other slideshow code in there so I get the impression that you can...

04-04-2003, 09:28 PM
Um, I don't mean to sound annoying but can you post the codes here for me? I check the Microsoft site you gave me and I don't really know which one to use. All i want are the codes for a slide show that runs automatically :)...If it's not too much to ask, putting the codes here would be really really really helpful :). Thanks a million!


04-04-2003, 09:54 PM
Well, first you need to download these two JS files

1) slideshow.class.js (http://www.peterbailey.net/dhtml/js/slideshow.class.js)
2) timer.class.js (http://www.peterbailey.net/dhtml/js/timer.class.js)

Save and upload them to your webserver.

Then, include them into the page
<script type="text/javascript" src="path/to/file/slideshow.class.js"></script>
<script type="text/javascript" src="path/to/file/timer.class.js"></script>Then, give the <img> in the HTML an ID. Whatever ID you'd like, such as "ssPic"

Then, create a <script> block and a function to initialize the slideshow. I abitrarily use init()

<script type="text/javascript">
function init()
var ssData = [
['3T_N1b.bmp', 'The 3T\\'s.'],
['Taj_N1b.bmp', 'Taj Jackson.'],
['Taryll_N1b.bmp', 'Taryll Jackson.'],
['TJ_N2b.bmp', 'T.J. Jackson.']
var ss = new SlideShow( 'ssPic', '', '', '', '/users/tttkatia/', ssData, 1, 1 );
ss.addFilter( 'progid:DXImageTransform.Microsoft.Fade(duration=2)' );
ss.play( 5000 );
</script>Note #1: the 5th parameter is the base URL for the images. I stuck this in, but it's wrong, as your images aren't located there. You will need to put in the correct URL.

Note #2: For the Fade transition, the duration=2 is the duration of the fading in seconds.

Note #3: ss.play( 5000 ); is what starts the slideshow. 5000 is the delay between slides in milliseconds, so what you see here is equivalent to 5 seconds.

Note #4: Using these values, the transition will take 2 seconds, and the time between slides is 5, so each slide will be fully visible for only 3.

Lastly, in the <script> tag, put this
onload = init;
OR, add this to the body tag
<body onload="init()">That should do it

04-04-2003, 10:04 PM
I want to thank you very much for your help Beetle!! I'm sure this will work....it doesn't look too complicated, haha :). I will do so later when I go home coz I'm currently at work so I'll download the files later and I'll let you how the settings went. Again, thanks a million! :)