Fade background in slide show

[geckoboy49]

1) Script Title: Ultimate Fade in Slide show

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

3) Describe problem: not really a problem per se, but a query....the script works fine for me, but is it possible to change the "var fadebgcolor" variable to say a textured background (jpg image) such as I have on all my pages? Since not all the images are identically sized, the background is evident and intrusive on some of them.

thanks

[rangana]

Yes you can. Just replace highlighted with the image you want:

var fadebgcolor="white"

And change the highlighted:

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 background-image

You could also subtitute it with background, for further reading:
http://www.w3schools.com/css/css_background.asp

See if it helps.

[Nile]

Found a little error in your script rangana.

var fadebgcolor="white"

Would have to be this:

var fadebgcolor="url('white')"

But the highlighted would stilll be an image.

[rangana]

Yes, good call

It's roughly 9pm here in the Philippines, and I guess I should sleep.
Sidenote, see this link:
http://dynamicdrive.com/forums/showthread.php?t=32953

You might be able to help the OP.

[jscheuer1]

You can also add a background image to the show by setting it in your stylesheet, ex:

#master0 div {
background-image:url('whatever.jpg');
}

This would be for the the first slide show on a page. If using more than one, the second would be #master1, the next #master2, and so on.

Often when using a background image with this script, you will want to use the background positioning property to get it to line up with your existing background image.

One other thing, if you go with rangana's method (editing the script), there are actually three places it needs to be edited, not just the two rangana mentions.

However, the style approach I mentioned is easier in most cases.

[geckoboy49]

You can also add a background image to the show by setting it in your stylesheet, ex:

#master0 div {
background-image:url('whatever.jpg');
}

This would be for the the first slide show on a page. If using more than one, the second would be #master1, the next #master2, and so on.

Often when using a background image with this script, you will want to use the background positioning property to get it to line up with your existing background image.

One other thing, if you go with rangana's method (editing the script), there are actually three places it needs to be edited, not just the two rangana mentions.

However, the style approach I mentioned is easier in most cases.

Where would I insert this in the script I have? (rank noobie that I am) and do I have to do anything else to make it work.......basically want the background of the fadeshow to be the same as the main page background

[jscheuer1]

It doesn't go in the script. It's css style. You can put it in the head of your page, right before the script, ex:

<style type="text/css">
#master0 div {
background-image:url('whatever.jpg');
}
</style>

<script type="text/javascript">
      
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo . . .

For more information on what you can do with background and style, see:

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

or your favorite css reference.