transparent/ no bg on fadeinslideshow?

[johnwboyd]

RE: http://www.dynamicdrive.com/dynamici...nslideshow.htm

I want this to be transparent/ no bg color. It's ruining my rounded corners png images and if i remove the code it won't work:

var fadebgcolor="#FFFF99"

[jscheuer1]

Well, you need a background with this script, otherwise there will be bleed through in addition to the fading effect from the various images in the show as they change and transform.

Like if you did:

var fadebgcolor="transparent"

You would see what I'm talking about.

Now I'm not sure how you have your corners set up, but you can use a background image instead of a background.

There are two places in the script where the var fadebgcolor is used. They both look like so:

background-color:'+fadebgcolor+'

and they are both in one very long line, this one:

document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')

If you change them both to:

background:'+fadebgcolor+'

Then you can use any valid background style for the var fadebgcolor, like:

var fadebgcolor="#fff url(some.png)"

You can also include any of the various positioning values that may be employed with a background property that uses an image. Often people use the same background image as the one that is behind the slide show, and use the positioning values to line it up with that existing background image.

Alternatively, if you just want your images in a frame, you can put a frame around the outside of the slide show, or make up a mask and apply it to each of the images.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[johnwboyd]

Here's a link to the site: http://www.clubrazzberry.com/car-loan1/

[jscheuer1]

I can't seem to get it pixel perfect, but if you use:

var fadebgcolor="#FFFF99 url(http://www.clubrazzberry.com/car-loan1/images/bg1.gif)"

and change this line:

document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')

to:

document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background:'+fadebgcolor+'"></div></div>')

It will work out pretty well.

After that, you can try fine tuning the background-position in a stylesheet in the head of the page, one entry for each show, ex (worked in FF at least full screen in my browser):

<style type="text/css">
#master0 div {
background-position:0 1px !important;
}
#master1 div {
background-position:1 -1px !important;
}
#master2 div {
background-position:0 1px !important;
}
</style>

But this seemed to vary by browser and by window size, and I lost patience with it. For more on using background-position see:

http://www.eskimo.com/~bloo/indexdot...bg/bgposit.htm

or your favorite css style reference.