Slideshow fade issues using transparent pngs

[abemonkey]

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

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

3) Describe problem: I am working on a website where I want to have quotes from founding fathers along with their image cycling right under the menu on each page. This slide show seemed to be the perfect solution. I want the quotes to be overlayed right over the top of the sites tiled background (looks like a concrete wall). This being the case I used png files and turned off the background color in the java script. On the first slide all appears to be working well but when the time comes for the second slide to appear it fades OVER THE TOP of the first slide, so with my png transparency it is as stacked up mess! Is there any way to adjust the code so that the opacity fades down on the current image at the same time that it is fading up on the new image so that it will be a true crossfade?

[jscheuer1]

With this script that can get tricky. You don't really need to edit the script though. Overriding styles may be used. Overriding style employs the:

!important

keyword.

So let's say that your page's background image is myBricks.gif and the wrapperid for the slide show is fadeshow1:


<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
background-image: url(myBricks.gif)!important;
background-position: center!important;
}
</style>

It is the highlighted property that is important in order to get it to line up with the page background image. You may specify a left and top coordinate, example:


background-position: 10px 30px!important;

If your layout is rigid enough, this will (with enough trial and error) work out.

[abemonkey]

Thanks for the help. I'm going to give it a try. I may have an easier alternative though. I talked to my client and he says that he would actually prefer that one slide fade out completely (leaving just the background) and then the next slide fade in after a second delay or so. If it isn't too difficult to do this please let me know. Thanks so much for the help.

[abemonkey]

I got the crossfade working! I just added this code to the foreground becomes background line: .animate({opacity:0}). This should have been in the original script so that it is a true crossfade!