PDA

View Full Version : Ultimate Fade-in Slideshow problem



sssssam
01-06-2009, 04:02 PM
1) Script Title: Ultimate Fade-in slideshow (v1.51)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:

Hi everyone! I'm new here, but don't panic - even though I don't speak a word JavaScript, I'm most certainly not a newbie when it comes to XHTML and CSS.

So this is the big idea: I'm using this script as a background-slideshow. Which means, the images fade into each other, but there's content on the foreground that does not change.

I made a DIV (class="fadeshow") with the JavaScript in it. Immediately after the script I made another div (class="fadeshowborder") with a background image. That image is the non-changing content.

Everything works fine, for about one cycle of images I believe. After that, the front image (or div in its entirety?) fades away with the images behind it. When I refresh the page, it's there again, but the problem persists.

Any hints on this one?

Thanks!

Sam

jscheuer1
01-06-2009, 04:38 PM
Ultimate Fade uses escalating z-index values. So if your cover is relying upon following the slide show in the page and/or having a higher z-index, either way, at some point it will be overcome by the slide show's escalating z-index. A good solution would be to set the cover's style in a stylesheet on or linked to the page:


.fadeshowborder {
z-index: 10000;
}

Assuming that this is the issue, it would then take 10000 image changes before the problem reappears.

Another solution which is a littler better would be to upgrade to:

Swiss Army Image slideshow (http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm)

Which can be made to look just like Ultimate Fade, but uses alternating z-index values instead of escalating ones. If you did that, setting:


.fadeshowborder {
z-index: 10;
}

would be sufficient to prevent the problem regardless of how many image changes there were.

sssssam
01-06-2009, 05:11 PM
Yup, it works now. Thanks very much for your help!