Slide show: how to change color of descriptions

[Tara]

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

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

3) Problem: The script is absolutely great, everything is working just fine, but there is two things I would like to change and just can't figure out how to:

a) How can I change the background color of the slides' descriptions? Now they are black and this doesn't agree at all with the rest of my design. Also, I would like to change the color of the writing itself if this is possible.
At the very beginning of the java script file for the slide show http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.js there is a part where you can change the size of the letters in the descriptions - maybe this is the right place to add color definitions too but I don't know how to:

var fadeSlideShow_descpanel={
controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
slidespeed: 200 //speed of description panel animation (in millisec)
}

-?

b) When I load the page with the slide show the first slide is not shown as already there but fades in from a black background. How can I start the slide show with the first image already in place, without it fading in from black?

I would be eternally grateful if someone could help me out!

Tara

[jscheuer1]

For the first questions - colors used in the description, editing the script would be tedious. These can be accomplished via overriding styles. Put this in the head of your page:


<style type="text/css">
.descpanelbg {
background-color: #f00000!important;
}
.descpanelfg {
color: #000000!important;
}
</style>

This will give you a red background and black foreground color. But remember, the background is partially transparent, so it will no be a bright red, more tending toward pink. You may adjust these colors as desired. Use of the !important keyword is required to override the scripted colors for these elements.

As for having an image be there to start things off, that's a little tricky. No image can appear until it has been downloaded by the browser. It would be easier and better to just use a different color background, one that matches the color scheme of your page, rather than black. To do so add this highlighted rule to the above:


<style type="text/css">
.descpanelbg {
background-color: #f00000!important;
}
.descpanelfg {
color: #000000!important;
}
#fadeshow1, .gallerylayer {
background-color: pink!important;
}
</style>

where fadeshow1 is the wrapperid for the slideshow. I used pink as an example, you may use any valid color name or valid hex color value.

An image may also be placed there (do not use the !important keyword for it):


#fadeshow1, .gallerylayer {
background-color: pink!important;
background-image: url(myfirstimage.jpg);
}

where myfirstimage.jpg can be the path and the filename to the first image in the show. But once things get rolling, you probably won't want it there any longer because it may bleed through. And, as I say - it won't necessarily appear right away, the browser still has to download it. This won't be a problem once it's cached, but all of your first time visitors will not have that luxury. So be sure to keep the background color too for those folks.

To get rid of it once the show starts rolling, add this to your fadeSlideShow call:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
onslide: function(){
this.setting.$gallerylayers.css({backgroundImage: 'none'});
this.setting.$wrapperdiv.css({backgroundImage: 'none'});
this.setting.onslide = function(){};
}
})

Don't miss the added comma (red) after the togglerid value.

[Tara]

Dear John,

thanks so much for the quick, helpful reply - it works fine now, and I'm happy with the solution concerning the design! Thank you!

Tara