Fade-in slideshow description height question

[Bar2aYunie]

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

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

3) Describe problem: I saw this amazing script for image slideshow with fade-in, which was exactly what I'm looking for (my best comments to the author). However I have a quesiton.

I've placed this script on a site and changed nothing so far in the code. (later I gotta change the images and stuff) I like the bottom left demo, where the images appear randomly with a description on mouseover. However, the description part now appears on mouseover, but covering the whole image instead of only a bottom line.

My question, where can I set the height of the description? And is it possible to change the color of the background and text of the description?

Thx for the help!

[jscheuer1]

For the height, you must have changed something, perhaps the amount of text, but it could have been anything, and might be something subtle that you'd never really expect to have that result. Post a link to your page and we can probably figure it out.

As for styling the text and background color, put this (choose your own colors) in your stylesheet:

.fadeslidedescdiv {
background-color: red!important;
color: white!important;
}

[Bar2aYunie]

Well I really changed nothing and checked twice for the right code.

But after endless searching I found this in the external fadeslideshow.js file:

			.appendTo(setting.$wrapperdiv)
		$('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs
			.css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
			.eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
			.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
			.appendTo(setting.$descpanel)
		setting.$descinner=setting.$descpanel.find('div.descpanelfg')
		setting.panelheight=setting.$descinner.outerHeight()
		setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
		if (setting.descreveal=="always"){ //create restore button
			setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
				.appendTo(setting.$wrapperdiv)

Note the red parts.

And I changed that into:

left:0, top:150
background:'#6F1346'
color:'white'
height:'20%'

Which fixed the problem. Took me quite long, as it was on the 226th line, lol. As it seemed quite obvious I tried changing it and saved the original file incase I did something wrong.

I post this in case somebody else has the same problem. Thank you though for your kind help!

[jscheuer1]

You can, obviously, do that. But the code works fine (as far as the height of the description) without it as long as you have a normal installation, and the style of the description can be influenced as I mentioned in my last post without any need to hunt through the code. You could even influence its height there if need be, also without editing the script. The advantage in doing it via style is that you still have the stock script. Now, if you have future issues, you are no longer using the official version.

I'm Glad your are happy with the result though.

[Bar2aYunie]

Yeah I know, but editing it there saved me time to figure out how to adjust the height. Of course, editing the colors through css is better, or at least easier, but I was looking for something to adjust the height. And as you said, you didn't know at that point.

Well anyway, I did save a copy of the original file, so in the case (which of course, I hope won't come) that I'll have problems in the future, the first thing I'll do is use the original of course. ^.^

For now, I don't need more editing and I'm not planning on changing anything else! (except the images of course, but that's the intention, haha) So this suits me perfectly. Thx for the nice comment!