Adding a fade-in effect to a simple slideshow

[judeabb]

http://www.corinnesilva.com/new/veterans.php
I am using a very simple slideshow script from codelifter.com - http://www.codelifter.com/main/javas...lideshow4.html
It does pretty much everything I need it to do (particularly allowing me to have a long description/caption next to the image).
In a perfect world, the slides would fade between each other as I click through them (at the moment it does that in IE only). Is there a bit of javascript I can add to make this happen?

And while I'm looking for a perfect slideshow - is there a way to have an image counter (preferably in the table cell between the next and previous arrows).

Any help gratefully received.

Thanks.

Jude

[jscheuer1]

http://www.dynamicdrive.com/dynamici...army/index.htm

[judeabb]

Yes I'm aware of Swiss Army Slideshow but I'm such a novice that I don't know how to tweak stuff to get the things I want. I tried it out and didn't know how to move the buttons or the captions. I know you've updated the code but I'm baffled by the style hooks and what to do with them. Is there a tutorial? Should I post this on the DD forum?

Jude x

[jscheuer1]

I know you've updated the code but I'm baffled by the style hooks and what to do with them. Is there a tutorial? Should I post this on the DD forum?

Yes, if you want more help, post in the DD scripts help section. The demo page for Swiss Army has a tutorial of the configuration options.

The updated script:

http://home.comcast.net/~jscheuer1/side/files/swiss.js

also has these added style hooks:

• #outer$ - outer division containing the show images.
• #master$ - division directly nested in #outer$, contains the two divisions that hold the tables that hold the images.
• #canvas$_0 - one of the two divisions that holds a table that holds the images.
• #canvas$_1 - the other of the two divisions that holds a table that holds the images.
• #desc$ - outer division containing the descriptions (holds the description prefix text, if used, and the below description span).
• #imgdsc$ - span that holds the descriptions.
• #counter$ - outer division holding the counter.
• #thecnt$ - span updated with actual image counter.
• #controls$ - outer division for the controls, if using images for buttons, this is actually a table.
• #prev$ - input button for previous image.
• #gostp$ - input button that starts or stops the slide show (a toggle).
• #next$ - input button for next image.
• #goto$ - text input for jumpto feature.
• #go$ - input button "GO" button for jumpto feature.

Now each slideshow on your page has a number. The first one is 0, the second one is 1 and so on. If you only have one slideshow, it's 0. So to style the description's outer container for it, use a style rule like (for example):

#desc0 {
 position: relative;
 top: - 5px;
}