Ultimate Fade-in slideshow - Using Transparency and image.png

[myyoungfamily]

1) Script Title: Ultimate Fade-in slideshow (v1.51)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: If I understand it correctly, the slideshow places the next image underneath the current image and then fades the top image to 0% opacity. I'm using transparency and png images so the bottom image shows through during the delay period. Is there any way to keep the bottom image at 0% opacity until the transition begins?

[jscheuer1]

And then what? In any case, that's not how it happens at all. The next image's container division is set to 10% opacity, zIndexed on top of the current image's container division (both image containers are absolutely positioned in a master container division) and faded in. No image or its container is ever at 0 opacity and the bottom image and container is always at 100% opacity. Even with an extensive rewrite, two fading operations - one in and one out would need to occur simultaneously, and would not look good and/or not act smoothly in some, maybe not in any browser.

However, most people - all in fact, that have so far wanted to display images with transparent sections have only wanted to do so in such a way that a background image shows through. If that is all you need, there is a much easier way of dealing with the situation.

I might add though, that if you are using .png images in the slideshow and they have any other type of transparency than single layer, non-alpha channel transparency (unless they are similar to a .gif with transparent sections), there will be unpleasantness in IE 6 and below.

The way to get an image to show through behind your fading images, rather than a solid color, as is the current situation in the slide show, change both instances of:

background-color:'+fadebgcolor+'

in the script to:

background:'+fadebgcolor+'

Once you do that, you may set a background image here:

var fadebgcolor="white"

like so:

var fadebgcolor="white url(myimage.jpg)"

Usually it will be the same as the background image of the page in that area where the slide show is, and may be lined up with it by using left and top coordinates (negative values may also be used):

var fadebgcolor="white url(myimage.jpg) 30px 40px"

[myyoungfamily]

Oh well, I forgot about the png thing in ie6. I ended up just putting my background in each image.