Results 1 to 8 of 8

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

  1. #1
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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"?
    DD Admin

  3. #3
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow (v2.4) Desc Panel

    Did you get this work.

    How to show the Desc Panel on Top

  5. #5
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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'?

  8. #8
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Never mind. I figured it out with CSS.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •