PDA

View Full Version : Adding a fade-in effect to a simple slideshow



judeabb
01-23-2009, 09:52 PM
http://www.corinnesilva.com/new/veterans.php
I am using a very simple slideshow script from codelifter.com - http://www.codelifter.com/main/javascript/slideshow4.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
01-24-2009, 05:00 AM
http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

judeabb
01-24-2009, 09:33 AM
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
01-24-2009, 03:48 PM
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;
}