Results 1 to 7 of 7

Thread: Ultimate Fade-in Slideshow -- Fade Duration and Pause

  1. #1
    Join Date
    Jul 2012
    Posts
    31
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Question Ultimate Fade-in Slideshow -- Fade Duration and Pause

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 09-28-2012 at 09:26 PM. Reason: tried it out
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ellenjones6 (09-28-2012)

  4. #3
    Join Date
    Jul 2012
    Posts
    31
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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 . . .
    - John
    ________________________

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

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ellenjones6 (09-30-2012)

  7. #5
    Join Date
    Jul 2012
    Posts
    31
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Default

    Yes! That fixed it. Again, many thanks! ellen

  8. #6
    Join Date
    Jan 2014
    Location
    East Tennessee
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Can I use the individual slide duration and pause with version 1.51? I tried it and it does not seem to make a change.
    Last edited by gary.mcgill; 02-21-2014 at 01:03 AM.

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    No you cannot. Update to the current version and use the added code as described in this thread.
    - John
    ________________________

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

Similar Threads

  1. Ultimate Fade-in slideshow - Pause when thumb selected
    By easycoder in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-21-2012, 10:30 AM
  2. Ultimate Fade-In Slideshow Alter First Pause
    By dhastings in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-28-2011, 08:13 PM
  3. Ultimate Fade-in slideshow (v2.4) Pause
    By bigblondehead in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-23-2011, 01:25 PM
  4. Resolved Ultimate Fade-in slideshow:eliminate onmouseover pause
    By avdistribution in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-20-2010, 09:21 AM
  5. Ultimate Fade-in slideshow - 2 that pause on page
    By Terts in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-03-2007, 09:44 PM

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
  •