How to style captions?

[ccesca]

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

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

3) Describe problem:

Hi :O)

How do i style my captions? I am using the Peekaboo effect. I have scoured the forums with search terms like "captions + styling", "captions + fonts", "captions + css", but to no avail.

There wasn't a css file that accompanied the script (from what i can remember). So i tried targeting the text in the caption by using #fadeshow1 (the ID of my slideshow) within my own css, but it didn't work.

Any guidance would be much appreciated. I've used this slideshow several times and this is the first time i'm wanting to utilize the captions.

kindly,

ccesca

[jscheuer1]

There is no stylesheet, the script assumes for simplicity's sake a one-size-fits-all approach in many of its stylings. However, one can override any of the scripted styles. The selectors are .descpanelbg for the description's background layer and .descpanelfg for the description's foreground layer, for example:

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

That would give you black descriptions on a faded orange background. Or you could do:

<style type="text/css">
.descpanelfg {
	color: yellow !important;
	font-size: 110% !important;
	font-family: comic sans ms, momospace !important;
}
</style>

I think you get the idea. Just be sure to use the !important keyword as shown to override any conflicting scripted styles for these elements.

[ccesca]

Excellent! Thank you, it worked!

Follow-up question....

Can I somehow include HTML in the captions... or is there any way to style certain words wthin the captions differently (i.e. headers and paragraphs), and make the background color for each image's caption different? Or perhaps include an image within the caption?

I understand this may be asking too much, but for all i know it's possible...?

ccesca

[jscheuer1]

All that can probably be done. To include HTML or an image as HTML in a description, use single quotes to delimit the caption, example:

imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "", "", '<span style="font-weight:bold;">Nothing</span> beats relaxing next to the pool when the weather is hot.'],
		["http:/ . . .

You can include an image in the same way, just use an img tag. It's probably best to supply the width and height attributes to make it easier for the script to lay it out in the description area.

As for changing the background color for each image, that would be a little more complicated. I'm not sure when to change it. The script has an onslide function, but depending upon when the description is revealed, that might be too late. I have an add on that provides an onbeforeslide function, but that may be too early. What sort of descreveal are you using? Unless we made up a set of overriding styles and switched out additional classes on the background panel we could no longer use overriding style in a stylesheet for the .descpanelbg selector, it would override anything we try to do in the script to change it.

If you don't mind the background color being 100% opaque, you could try making a div within the description field for each imagearray entry that includes the background color:

imagearray: [
		["some.jpg", "", "", '<div style="background-color:blue;"><span style="font-weight:bold;">Nothing</span> beats relaxing.</div>'],
		["http:/ . . .

You might have to specify height and/or width at 100%, but perhaps not.

[ccesca]

Thank so much for your helpful and detailed reply....

I haven't had a chance to experiment with these new ideas, will hopefully get the opportunity to do so over the weekend and will let you know how i get on.

Thanks again for replying, I'm very grateful.

[ccesca]

Wow... it's me here again, with the exact same question, and i just realized I was the OP!! (almost exactly one year later... well, not quite,... but kind of)

Hahaha!!

Thanks again