Need help with descriptions panel height in Ultimate Fade in slideshow

[dculture]

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

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

3) Describe problem: I have a question concerning the descriptions panel background/div height. I noticed that the greatest amount of text dictates the height of the panel background color. For example: I have 5 lines of text on one slide, but only 1 line of text on another slide. The slide with 1 line of text still gets the same background height as the slide with 5 lines of text. This visually looks odd. Is there a way for the height to adjust itself from slide to slide?
How do I make the close button for the text description more legible? Unlike the demo, I have dark gray text on a white background, so one can hardly see the button. Is there a way to style it?
On a related subject I increased the padding around my description text on line 238 in the .js file, but it pushed the closed button too far to the right. Clearly I don't know javascript very well. Please help

[jscheuer1]

I have a question concerning the descriptions panel background/div height. I noticed that the greatest amount of text dictates the height of the panel background color. For example: I have 5 lines of text on one slide, but only 1 line of text on another slide. The slide with 1 line of text still gets the same background height as the slide with 5 lines of text. This visually looks odd. Is there a way for the height to adjust itself from slide to slide?

Use this modified version of the script:

Attachment 4160

How do I make the close button for the text description more legible? Unlike the demo, I have dark gray text on a white background, so one can hardly see the button. Is there a way to style it?

No. It's an image. You may replace it with one of your own choosing or edit in an image editing program to get the look you want for it. It is partially configured in the script (near the top):

var fadeSlideShow_descpanel={
	controls: [['x.png',7,7], ['restore.png',10,11], ['loading_y.gif',54,55]], //full URL and dimensions of close, restore, and loading images
	fontStyle: 'normal 11px Verdana', //font style for text descriptions
	slidespeed: 200 //speed of description panel animation (in millisec)
}

So if you change it's filename or dimensions, enter them there in the code.

On a related subject I increased the padding around my description text on line 238 in the .js file, but it pushed the closed button too far to the right. Clearly I don't know javascript very well. Please help

I'm not sure on that one, how much did you increase the padding by? I may have to see the live page to figure that one out.

Note: The browser cache may need to be cleared and/or the page refreshed to see any changes.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[dculture]

Thank you so much John, the updated js file worked like magic!! Heights are now adjusting!

Here is the link to the site where I am experiencing the problems I describe below. http://www.designculturestudio.com/t...ills2010c.html

Is there a way for the restore button to appear first instead of the actual caption? In other words, I would like to give the option of clicking on "info" rather than have the description appear first. I also noticed that the restore button stays when you move to the next slide even if the slide doesn't have a caption. How do you keep that from happening? Also the restore button position is fixed. I have varying size images and it would be ideal if the button's position adjusted to align with the right edge of the image not the right edge of the maximum dimensioned slide.

I would like to left justify the caption text so that it aligns with the left edge of the slide. I tried changing the padding to 0 in the js file on line 256. It aligned the text properly, but then the panel background didn't fill the entire slide width. How do I achieve left justification, provide padding at the top and have a full panel background width.

[dculture]

Hi John,

I wanted to see if you had a moment to look at the link I sent in my previous post. Any advice on how to change the position of the restore button and how to reverse the sequencing of the caption and restore button would be appreciated.

Thank you.

[jscheuer1]

I'm not sure I understand all of what you're asking for. And there are at least two ways to do one of the parts I do understand.

First what I don't get:

"I would like to left justify the caption text so that it aligns with the left edge of the slide."

It sort of does this already, just a matter of a few pixels, right?

If so, and I see you've given the captions spans with a class, then you could use a style like so to pull them the rest of the way:

.caption-text {
	position: relative;
	display: block;
	left: -10px;
}

Or:

.caption-text {
	display: block;
	margin-left: -10px;
}

OK, on to the restore or info button as it now is. Try this out -

Update to jQuery 1.6.4 (this isn't required for this, it fixes a bug with the existing page and IE 8, and is simply a more stable version), change this:

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

to:

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

Grab my extrabuttons.js file (right click and save as). And put it in the same folder as the page. Add its tag after the fadeslideshow.js tag, so that whole section will now look like so:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/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" src="js/extrabuttons.js">

// Extra Buttons Script (c)2011 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// add on for Ultimate Fade In Slideshow
// username: jscheuer1 - This Notice Must Remain for Legal Use

</script>
<script type="text/javascript">

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank D . . .

The extrabuttons.js adds an onbeforeslide event to the slideshow, which we will need in the next part - In the on page call add the highlighted:

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [700, 467], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/project-large/berkeley-hills2010/bh1.jpg", "", "", "<span class='caption-text'>Lorem ipsum dolor sit amet, vim quando soluta ut, vis te vivendo ponderum splendide. Mel no augue facilisis vituperatoribus. Sale eirmod insolens mel an, vis te adhuc simul instructior. Nec iudico accusam et, esse democritum mei et. Ei sed phaedrum evertitur. Meliore conceptam has id. Ad his viderer detracto, te eam brute liberavisse. Ea unum tation mel, nec natum movet dicant ei. At ius case magna fugit. Illud assueverit efficiantur pro ei, enim ignota incorrupte no sea. No sit veritus reformidans, ne est oblique eleifend conceptam. Mazim virtute cu has. Et eos odio fastidii convenire, has cetero vulputate vituperata eu. Ne vel bonorum dolorem, ad erat minim voluptua per. Sed no quod graeci gubergren.</span>"],
		["images/project-large/berkeley-hills2010/bh2.jpg"],
		["images/project-large/berkeley-hills2010/bh3.jpg"],
		["images/project-large/berkeley-hills2010/bh4.jpg", "", "", "<span class='caption-text'>caption here</span>"],
	["images/project-large/berkeley-hills2010/bhtanks.jpg", "", "", "<span class='caption-text'>Construction photo of tanks installation for rainwater catchment system</span>"],
	["images/project-large/berkeley-hills2010/bh6.jpg"]
		
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler",
	oninit: function(){this.showhidedescpanel('hide', 0);}, //start out with captions hidden
	onbeforeslide: function(idx){
		var set = this.setting;
		if(set.$restorebutton.css('visibility') === 'visible' && !set.imagearray[idx][3]){
			set.$restorebutton.hide();
		} else {
			set.$restorebutton.show().animate({
				right: set.dimensions[0] - set.$gallerylayers.find('img').eq(idx).width()
			});
		}
	}
})

Don't miss the added comma (red) after the togglerid value.

That's it for starting out with the descriptions hidden and for not showing the info button when there is no caption, and for aligning the info button to the right edge of the image. Those last two bits are where I'm a little unclear as to what to do. In the above I have it:

		} else {
			set.$restorebutton.show().animate({
				right: set.dimensions[0] - set.$gallerylayers.find('img').eq(idx).width()
			});
		}

What this does is if there was no caption for the previous image, makes the info button appear and then slide into position if it's different than where it would have been had the previous image had a caption. This is how I did it at first. But we could instead do it like so:

		} else {
			set.$restorebutton.animate({
				right: set.dimensions[0] - set.$gallerylayers.find('img').eq(idx).width()
			}, function(){set.$restorebutton.show();});
		}

What this does is if there was no caption on the previous image, the info button pops into view after positioning itself.

After seeing it the first way, I though this would be better, but after seeing it both ways, I like the first one now. You can try them both out and decide for yourself.

Added Later:

I was playing around with this a bit more and it looked funny that the info button aligned with the image but that the close button didn't. It was trickier than with the info button, but I worked it out:

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [700, 467], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/project-large/berkeley-hills2010/bh1.jpg", "", "", "<span class='caption-text'>Lorem ipsum dolor sit amet, vim quando soluta ut, vis te vivendo ponderum splendide. Mel no augue facilisis vituperatoribus. Sale eirmod insolens mel an, vis te adhuc simul instructior. Nec iudico accusam et, esse democritum mei et. Ei sed phaedrum evertitur. Meliore conceptam has id. Ad his viderer detracto, te eam brute liberavisse. Ea unum tation mel, nec natum movet dicant ei. At ius case magna fugit. Illud assueverit efficiantur pro ei, enim ignota incorrupte no sea. No sit veritus reformidans, ne est oblique eleifend conceptam. Mazim virtute cu has. Et eos odio fastidii convenire, has cetero vulputate vituperata eu. Ne vel bonorum dolorem, ad erat minim voluptua per. Sed no quod graeci gubergren.</span>"],
		["images/project-large/berkeley-hills2010/bh2.jpg"],
		["images/project-large/berkeley-hills2010/bh3.jpg"],
		["images/project-large/berkeley-hills2010/bh4.jpg", "", "", "<span class='caption-text'>Their disturbing unicorns acutely step to their exigent turtles. Your abiding chocolates abominably accept your admiring parrots. Their admonishing penguins ab</span>"],
	["images/project-large/berkeley-hills2010/bhtanks.jpg", "", "", "<span class='caption-text'>Construction photo of tanks installation for rainwater catchment system</span>"],
	["images/project-large/berkeley-hills2010/bh6.jpg"]
		
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler",
	oninit: function(){this.showhidedescpanel('hide', 0);},
	onbeforeslide: function(idx){
		var set = this.setting, w = set.$gallerylayers.find('img').eq(idx).width() - 8;
		if(set.$hs){set.$hs.remove();}
		set.$hs = jQuery('<style type="text/css">.caption-text{width:' + (w - 8) + 'px;}<\/style>').appendTo('head');
		set.$measure.css({width: w});
		if(set.$descpanel.css('visibility') === 'hidden'){
			set.$descinner.css({width: set.dimensions[0] - 8});
		}
		set.$descinner.animate({width: w});
		if(set.$restorebutton.css('visibility') === 'visible' && !set.imagearray[idx][3]){
			set.$restorebutton.hide();
		} else {
			set.$restorebutton.show().animate({
				right: set.dimensions[0] - set.$gallerylayers.find('img').eq(idx).width()
			});
		}
	}
})

[dculture]

Thank you John. The alignment code for the caption-text was just what I needed.

I was rethinking the restore/caption behaviors after including your latest suggestions and thought it might be best to keep things simple. Please see the attachments for examples of where I would like to put the close and info (restore) buttons (they are in the same position). Placing these on the left will keep things consistent and navigation easy. How do I accomplish this? I started playing with the margins, but any position I try beyond the slide window doesn't work.

The info (restore) button is still appearing on slides that don't have captions when I toggle from one that does have a caption to one that doesn't. I did include your latest post suggestions hoping that would fix it, but it didn't. Do you have any other advice on this?

Attachment 4166

Attachment 4167

[jscheuer1]

You may have missed something from my previous post. That (not showing the info button when there's no caption) was taken care of. In any case I can see the live page hasn't been updated. I cannot see what you've missed.

Here's a live demo:

http://home.comcast.net/~jscheuer1/s...ly_hills_h.htm

Edit: The OP removed resource files, so this demo no longer works, its source code could be instructive though.

About the demo - If you use extrabuttons.js, get your own copy. Hotlinking to mine probably is a bad idea, though it can work for testing purposes. The base href tag:

<base href="http://www.designculturestudio.com/test/website-combo/" />

is only required so that I get your resource files for the demo without specifying their absolute paths. It may be removed once the page is in its proper folder on your site.

[dculture]

Thank you John for the demo. I really like how the buttons slide to adjust to the image width. This is a great solution and I finally managed to get it to work!!! I appreciate the time you took to help me figure this out.