Ultimate Fade-in slide show image background to the description table?

[tsimpouri]

1) Script Title: Ultimate Fade-in slide show

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

3) Describe problem: Hello i am using this script and i am trying to make 2 things i want the background of the description table to be an image not only the color and is there a way to have the desciption image to be in the slideshow an when the the mouse cross over the slide to lift up? i want to have the top of the image vissible and when the mouse cross to see the full image.

Thanks,

[azoomer]

this css will get you an image in the description-background

.descpanelbg {
	background: url('your-image.jpg') !important;
}

or you could set the image in the fadeslideshow.js in line 239

.eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
			.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end()

Here you can also control the opacity of the image.
Right now I can't answer the question about getting it higher up, but I suggest you make a test page and post a link, then it will be easier for someone to help.

[tsimpouri]

hello the link is here http://webox.gr/fresh/slide.html i have add the css code in th html but nothing happend how can i add it in the js thanks.

[tsimpouri]

And i hove another problem in the internet explorer the slide is not working i am getting a messege that in the line 38 the character 3 is zero...

[azoomer]

Hi I made a mistake forgetting a point and some quotes in the css. It needs to be like this

.descpanelbg { /* see the red point in the beginning of this line*/
	background: url('http://www.webox.gr/fresh/images/video.jpg') !important;
}

You have a little mistake with an extra comma in this part

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [950, 600], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.webox.gr/fresh/images/1.jpg", "", "", "<b>What’s Fresh & New</b><br><br>Nέο <b>All Day Sandwich</b> To νέο σάντουιτς απευθύνεται σε όλους  με υπέροχες γεύσεις και...<br><br><br><br><br><br><br><br><br><br><br><br>"],
		["http://www.webox.gr/fresh/images/2.jpg", "", "", "<b>What’s Fresh & New</b><br><br>Nέο <b>All Day Sandwich</b> To νέο σάντουιτς απευθύνεται σε όλους  με υπέροχες γεύσεις και...<br><br><br><br><br><br><br><br><br><br><br><br>"],
			["http://www.webox.gr/fresh/images/3.jpg", "", "", "<b>What’s Fresh & New</b><br><br>Nέο <b>All Day Sandwich</b> To νέο σάντουιτς απευθύνεται σε όλους  με υπέροχες γεύσεις και...<br><br><br><br><br><br><br><br><br><br><br><br>"],
				["http://www.webox.gr/fresh/images/4.jpg", "", "", "<b>What’s Fresh & New</b><br><br>Nέο <b>All Day Sandwich</b> To νέο σάντουιτς απευθύνεται σε όλους  με υπέροχες γεύσεις και...<br><br><br><br><br><br><br><br><br><br><br><br>"],
					["http://www.webox.gr/fresh/images/5.jpg", "", "", "<b>What’s Fresh & New</b><br><br>Nέο <b>All Day Sandwich</b> To νέο σάντουιτς απευθύνεται σε όλους  με υπέροχες γεύσεις και...<br><br><br><br><br><br><br><br><br><br><br><br>"], // remove the red comma
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 5000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
</script>

This little comma will prevent it from working in IE. Scroll the codebox to see it.
There are many <br> tags in the description and it will not validate like that, but you can try something like this

.descpanelfg {
	text-align: center;
}

There is a blog post about this on dynamic drive look HERE

[tsimpouri]

Thank you very much it works now is any way to make the descreption to be visible in the slide show but not the hole image and when the cursor cross from the slide to see the hole image?

Thanks

[tsimpouri]

is it possible?

Thanks