Ultimate Fade-in Slideshow -- Fade Duration and Pause

**ellenjones6** · 09-28-2012, 07:26 PM

1) Script Title: Ultimate Fade-in slide show v2.4

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

3) Describe problem: I am replacing the Flash banner on my web site with a slideshow banner. By searching through previous forum posts, I was able to get the banner to do several things I wanted: loop once and stop at the last image; keep going even when the user hovers his/her mouse; fade from a white background color instead of black. What I was not able to do was to specify fade duration and pause for individual slides. What I want to do is to be able to change the pause time and the fade duration for the first slide so that the fade from white to the first image is very rapid. I found a helpful post on this topic (http://www.dynamicdrive.com/forums/s...how+mouse+over), but was not able to implement the solution.

Here is the page I am working on: http://adirondackvic.org/index-fall.html

Here, I think, is the relevant code:

Code:

<style type="text/css">
#fadeshow2 {
	overflow: auto;
	width: 960px;
	height: 102px;
	margin: 0 auto;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow2.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 mygallery=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [960, 102], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://Adirondackvic.org/Images/Banner-Fall-Slide-1.jpg", "", "", 500, 10],
		["http://Adirondackvic.org/Images/Banner-Fall-Slide-2.jpg", "", "", ],
		["http://Adirondackvic.org/Images/Banner-Fall-Slide-3.jpg", "", "", ],
		["http://Adirondackvic.org/Images/Banner-Fall-Slide-4.jpg", "", "", ],
		["http://Adirondackvic.org/Images/Banner-Fall-Slide-5.jpg", "", "", ],
		["http://Adirondackvic.org/Images/Banner-Fall-Slide-6.jpg", "", "", ],
		["http://Adirondackvic.org/Images/Banner-Fall-Slide-7.jpg", "", "", ]//<--no trailing comma after very last image element!
	],
		titlesAndAlts: [
		{title: "Adirondack Wetlands:  Heron Marsh at the Paul Smiths VIC", alt: "Adirondack Wetlands:  Heron Marsh at the Paul Smiths VIC"},
		{title: "Adirondack Wetlands:  Heron Marsh at the Paul Smiths VIC", alt: "Adirondack Wetlands:  Heron Marsh at the Paul Smiths VIC"},
		{title: "Ferns on the Boreal Life Trail at the Paul Smiths VIC", alt: "Ferns on the Boreal Life Trail at the Paul Smiths VIC"},
		{title: "Adirondack Wetlands:  Barnum Bog at the Paul Smiths VIC", alt: "Adirondack Wetlands:  Barnum Bog at the Paul Smiths VIC"},
		{title: "Trees of the Adirondacks: Red Maple at the Paul Smiths VIC", alt: "Trees of the Adirondacks: Red Maple at the Paul Smiths VIC"},
		{title: "Saint Regis Mountain from the Barnum Brook Trail at the Paul Smiths VIC", alt: "Saint Regis Mountain from the Barnum Brook Trail at the Paul Smiths VIC"},
		{title: "Saint Regis Mountain from the Barnum Brook Trail at the Paul Smiths VIC", alt: "Saint Regis Mountain from the Barnum Brook Trail at the Paul Smiths VIC"},

	],

	displaymode: {type:'auto', pause:1000, cycles:1, wraparound:true, randomize:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 2000, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "",
	oninit: function(){
		var sObj = this.setting;
		sObj.$wrapperdiv.bind('mouseenter', function(){sObj.ismouseover = false;});


			this.setting.dpause = this.setting.displaymode.pause;
			this.setting.dfade = this.setting.fadeduration;
		},
	onslide: function(c, i){
			this.setting.displaymode.pause = this.setting.imagearray[i][4] || this.setting.dpause;
			this.setting.fadeduration = this.setting.imagearray[i][5] || this.setting.dfade;
		}
})


</script>

<style type="text/css">
<!--
#fadeshow2, #fadeshow2 .gallerylayer {
 background-color: white!important;
}

As you can see, I dialed the fade duration for the first image back to 10 milliseconds, but it doesn't seem to affect the time this image takes to appear. What am I doing wrong? Also, I am unclear as to how a specific image is affected by a change in fade duration. If I specify a short change duration for the first image, does that mean that this image will fade in more quickly or does it mean that the transition time to the next image will be shorter? I am confused.... Please help. Ellen

**jscheuer1** · 09-28-2012, 08:05 PM

Well, your settings here are off:

Code:

	displaymode: {type:'auto', pause:1000, cycles:1, wraparound:true, randomize:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 2000, //transition duration (milliseconds)

The pause - the amount of time the slide is seen for cannot be less than the fadeduration - the amount of time it takes for the image to fade in.

At least with your individual setting in the imagearray the pause (500) is longer than the fadeduration (10). That would amount to virtually no fade in and a pretty brief display time.

But since it's the very first image, it may be too late to adjust at that point. And the amount of time it takes before the first image appears is also influenced by how long it takes the browser to load the image. The script will not show the first image until it's loaded. Otherwise it would look bad, like any other image does when it's loading. And it would be fading in at the same time - yech!

You could set the background of the slideshow to be the first image. That way it will show up with no fading at all as soon as it's available.

Another thing you could try is setting this like so:

Code:

	displaymode: {type:'auto', pause:500, cycles:1, wraparound:true, randomize:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 10, //transition duration (milliseconds)

And then down here for the oninit:

Code:

	oninit: function(){
		var sObj = this.setting;
		sObj.$wrapperdiv.bind('mouseenter', function(){sObj.ismouseover = false;});


			this.setting.dpause = 2000;
			this.setting.dfade = 1000;
		},

That will return those values to normal after the first slide has shown and allow future slides to use those values unless they have a setting in the imagearray. And it's a little confusing, but I just tested it. I believe the fadeduration setting in the imagearray affects the next slide, not the current one, while the pause time affects the current slide. Experiment and see.

**ellenjones6** · 09-30-2012, 04:33 AM

Thanks! This worked perfectly; and I now have the regular page up and running: http://www.adirondackvic.org/index.html.

I have experimented and I think that the fade duration applies to how fast the current slide fades in. For instance, on this page -http://adirondackvic.org/index-winter.html - I changed the fade duration of the first slide to 8000 milliseconds. As you can see, this affects the fade duration for that slide, not the next one.

I do have one additional question. I included titles and alts for each image, but they do not show up when I hover my mouse over the images in any of the browsers I tested. I assume this is because I have turned off the feature that causes the slide show to pause on mouse hover. Is there any way to make the tool tip show up for the final slide and still disable the feature causing the slide show to pause on mouse hover? Just wondering...

Thanks again! ellen

**jscheuer1** · 09-30-2012, 02:02 PM

You're missing some code, make the oninit like so:

Code:

	. . . st: false, //remember last viewed slide and recall within same session?
	fadeduration: 8000, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "",
	oninit: function(){
		var sObj = this.setting;
		sObj.$wrapperdiv.bind('mouseenter', function(){sObj.ismouseover = false;});
		sObj.$gallerylayers.each(function(){
			jQuery(this).find('img').each(function(i){
				this.alt = sObj.titlesAndAlts[i].alt;
				this.title = sObj.titlesAndAlts[i].title;
			});
		});
		sObj.dpause = 2000;
		sObj.dfade = 1000;
		},
	onslide: function(c, i){
			this.setting.displa . . .