Ultimate Fade-In w/ Transparent gifs

[jumpstart]

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

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

3) Describe problem:

I am trying to use this script to switch between gifs that have a transparent background. I want to lay "light" images on top of a detailed background that I would rather have the user only download once.

Everything is fine, except that once I changed the background color specification in the script to "transparent" now you can see all of the gifs stacked on each other.

http://www.broadmesa.com/wb/

Any fix for this?

Thanks,

JS

[jscheuer1]

Nothing is really 'broken'. That is exactly what I would expect to happen. What you can to do is change the script so that instead of a background color for the fading divisions, you have a background image. Even though it would be the background to two different fading divisions, it would appear as one image and, if solid, would not allow the other gif images to show through.

To do this, change the two instances of:

background-color:'+fadebgcolor+'

in the script to:

background:'+fadebgcolor+'

Once you have done this, you can set the background image for the fading divisions here, like so:

 . . .es2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
 
var fadebgcolor="white url(some.jpg)"
 
////NO need to edit be . . .

It is a good idea to still specify a color as shown, but it doesn't have to be white and should probably match the page's background color. You can also use any other of the valid background style property's values in this string that you like.

Note: I cannot be certain if this will completely solve your problem as you will not be able to see anything behind the background image and it will be all that can be seen behind any given gif in the show, but it is about the best that can be done with this script.

[jumpstart]

Hello John,

Thanks so much for your reply! I was just able to review it now. The solution is just what I am looking for, except for one thing. I have three slideshows next to each other, and all three need a unique background.

I was able to make the fix you suggested work, but the same background repeats on all three slides. I looked through the code, but I'm just not a programmer!

Thanks,

JS

[jumpstart]

Okay, I came up with a workaround. I tiled same background piece behind each slideshow area, and then created a graphic with a large blank area in the center and "endcaps" at each end that is the background of the div. It creates the illusion of a solid graphic, and I believe that it's also the "lightest" solution, as I can use gifs with large transparent areas as the slideshow images and then 75% of the background is covered by one repeated graphic.

Thanks again,

JS

[jscheuer1]

Well, then you need slightly more extensive modifications. Where you now have something like this (from my previous post):

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

Use an array construct like so:

var fadebgcolor=[];
fadebgcolor[0]="white url(some.jpg)"
fadebgcolor[1]="white url(someother.jpg)"
fadebgcolor[2]="white url(yetanother.jpg)"

And, instead of what is now this (remember, again to change it in both places):

background:'+fadebgcolor+'

Use:

background:'+fadebgcolor[this.slideshowid]+'

[jumpstart]

Hi John,

That's excellent, exactly what I was looking for. I knew it seemed possible. That's a useful modification.

I must have been posting the workaround I came up with based on your previous post as you wrote this solution!

Thanks again, it's a great script.

----JS

Workaround in action:

http://broadmesa.com/wb/