Problem with Fade-in slideshow (v2.1)

**hansan** · 05-04-2010, 08:29 AM

hi,
how the change Fade-in slideshow to carrying the corresponding description automatically when changing the images ?
this should be exactly like, slideshow on http://www.aiesec.org/
link to Fade-in slideshow (v2.1)
http://www.dynamicdrive.com/dynamici...nslideshow.htm

In here I changed

Code:

descreveal: "auto"

(bellow appear in red)
but it's not working.

can anyone suggest me the solution ?

Code:

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", 
	dimensions: [250, 180],
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing."],
		["http://i29.tinypic.com/xp3hns.jpg", "", "", "Some day I'd like"],
                ["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful "] 
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false,
	fadeduration: 200, 
	descreveal: "auto",
	togglerid: ""
})

</script>

**Erik_M** · 05-04-2010, 12:43 PM

Reading the description of your code on the publisher's side leads me to believe the auto option is not for descreveal but for togglerid the only 2 options for descreveal are "always" and "manual" hope this helps.
Erik.

**hansan** · 05-04-2010, 01:37 PM

Erik_M, i tried it.that's not the point.
i'm sure it has a some method to do it.

**jscheuer1** · 05-04-2010, 02:31 PM

Erik_M is right. Using 'always' is the closest you can come with this script without a fairly major modification. Using 'always' will have the descriptions always in view, not jumping up and down as on the page you linked to.

**hansan** · 05-04-2010, 03:36 PM

No jscheuer1, actually i want to descriptions jumping up and down automatically when slides are changing rather than descriptions always in view.
this is an example that i really need

http://www.aiesec.org/

please look at the slideshow in above link.

further can we do the Fade-in slideshow, more smoothly(continuously) rather than images turn on and off ? ( exactly like above link slideshow )

**jscheuer1** · 05-04-2010, 04:45 PM

Yes, that's the best you can do without a fair amount of modification to the script. I've been taking a look at it, and the script does have an onslide feature, but I don't see how that will allow it to do what you want. It almost does, except for when the user causes the slide show to pause onmouseover, then the timing for the descriptions gets screwy. I was thinking of adding an onbeforeslide feature. If that's possible to do without too much trouble, then it shouldn't be too hard to get the kind of action for the descriptions that you want.

**hansan** · 05-04-2010, 05:09 PM

yes jscheuer1, pause onmouseover is a problem.
1st we have to remove onmouseover function. then we can do the modification that i really want.

How can we do that ?

**jscheuer1** · 05-04-2010, 09:12 PM

I think you want a pause. What if the images are going by too quickly for the first time viewer to read the descriptions? They would like a pause for that. And, if there are links, you really need a pause so that the link the user is clicking on doesn't change while they are in the process of clicking on it. The example you linked to has a mouseover pause. The only real problem with the pause was that it required more extensive modification to get the effect you want to both work and to look right. The mouseout event was a problem in manual mode though because it dismissed the description. In always mode, there were the images to control the descriptions. I chose always mode and set the dimensions of the control images to 0. One other problem with the mouseover pause was that the length of time it took to resume motion equaled the pause rate configured for the slide show. This results in either too quick of a show, or too long of a pause after the mouseout. I made a separate property for that - mouseresume.

After all that, and the onbeforeslide property I mentioned before, and a few more modifications, I came up with this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow_onbefore.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">
var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //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", "#what", "", "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", "", "", "Eat your fruits!"],
		["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:4000, cycles:0, wraparound:false, mouseresume:300},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 600, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "",
	onbeforeslide: function(layer, idx){
		this.showhidedescpanel('hide');		
	},
	onslide: function(layer, idx){
		if(this.setting.imagearray[idx][3]){
			this.setting.$descinner.empty().html(this.setting.imagearray[idx][3])
			this.showhidedescpanel('show');
		}
		
	}
})
</script>
</head>
<body>
<div id="fadeshow2"></div>
</body>
</html>

It uses this modified script (right click and 'save as'):

Attachment 3292

**hansan** · 05-05-2010, 01:18 AM

hmmmm..... that is fine.this is the slide show that i really need

thank you jscheuer1.

i want to make this more continuously(more smoothly). would you mine telling me how the slow down image transition speed?(not the duration of image view)
what is the variable should i increase?

**jscheuer1** · 05-05-2010, 02:17 AM

That's (as it is in the original version) the:

Code:

fadeduration: 600, //transition duration (milliseconds)

When you modify that, you may or may not want to also modify:

Code:

displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false, mouseresume:300},

The pause is how long each image displays, the mouseresume is for, after a mouseover pause occurs, how long it takes after mouseout for the show to transition to the next image.

Neither of these is directly related to the fadeduration, but in some circumstances they will work together to produce various intervals. Play around with the slide show once you have your preferred fadeduration set in order to see if you want to adjust either of these two other values.