Ultimate Fade-in slideshow (v2.4) ---> question on descripiton panel

[soul_movement]

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

Hi~I just have one question for this slideshow. You see the black description panel that comes up from the bottom of the slideshow? is it possible to make it comes out from the right? left? or top?

Thank you for answering my question,

Z

[ddadmin]

Coming up from the top instead probably is the easiest route of the three here. By top, are you saying in all modes, from "ondemand" to "always"?

[soul_movement]

Yes~I want it to have an X for the user to control~

[tee]

Did you get this work.

How to show the Desc Panel on Top

[azoomer]

Tee ! if you just want it on top in the "always" mode you can probably do it with css like this
#fadeslidedescdiv { top:0 !important;}
but I think some more adjustments will be needed depending on how you want it to work. For example if you need the X button to work this is going to look a little bit strange. Also in the "ondemand" or "peekaboo" mode it will be more difficult to adjust to the top position.

[jscheuer1]

To get them on top, this works with descreveal "peekaboo" or "always" (use in place of the ordinary code for this script in the head of the page, use the other options as instructed on the demo page, can be used with multiple slide shows on a page, if you want for more info on that or any of this, just ask):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

fadeSlideShow.adddescpanel = function($, setting){
	setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
		.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:0, font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
		.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:$colordefondo}).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({top: -setting.panelheight - 8})
	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)


	}
};

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: "peekaboo",
	togglerid: "",
	oninit: function(){
		this.setting.$descpanel.css({top:0}).find('div').css({width:'100%'});
		this.showhidedescpanel = function(state, animateduration){
			var setting=this.setting
			var endpoint=(state=="show")? 0 : -setting.panelheight - 8
			setting.$descpanel.stop().animate({top:endpoint}, (typeof animateduration!="undefined"? animateduration : fadeSlideShow_descpanel.slidespeed), function(){
				if (setting.descreveal=="always" && state=="hide")
					setting.$restorebutton.css({visibility:'visible'}) //show restore button
			})
		};
	}
})

</script>

[pcwriter]

The solution provided by jscheuer1 above works marvelously well... even for a js n00b like me! :-)

However, it only allows the description to display at the top if displaymode is set to 'auto'. Is there any way to set it so descriptions are at the top when displaymode is set to 'manual'?

[pcwriter]

Never mind. I figured it out with CSS.