Results 1 to 2 of 2

Thread: Ultimate Fade-in slideshow (v2.4) - Stager the timing of multiple fadeshows

  1. #1
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Ultimate Fade-in slideshow (v2.4) - Stager the timing of multiple fadeshows

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

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

    3) Describe problem:

    Hi All,

    I am implementing multiple fadeshows on the same page which i have acheived with no issue, but i am wanting to have them staggered so that they are changing at different times.

    They would need to display for the same duration but change at different times maybe by adding a delay before each one initialises ?

    I have searched the forum and could not find anything to help,


    Any help would be appreciated!

    Thanks in advance

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Something like (copy and paste into your browser's address bar):

    bistrodongiovanni.com/

    The code used there:

    Code:
    <script type="text/javascript">
    
    fadeSlideShow.sync = function(){
    	fadeSlideShow.sync.gals = fadeSlideShow.sync.gals || [];
    	fadeSlideShow.sync.duration = fadeSlideShow.sync.duration || 0;
    	fadeSlideShow.sync.gals.push(this);
    	fadeSlideShow.sync.duration = Math.max(fadeSlideShow.sync.duration, this.setting.fadeduration);
    	if(fadeSlideShow.sync.gals.length !== fadeSlideShow.sync.numGals){return;}
    	var thegals = fadeSlideShow.sync.gals;
    	fadeSlideShow.sync.duration *= 1.1;
    
    	setTimeout(function(){
    		jQuery.each(thegals, function(i, gal){
    			gal.setting.$wrapperdiv.bind('mouseenter mouseleave', function(){gal.setting.ismouseover = false;});
    			setTimeout(
    				function(){
    					gal.setting.displaymode.type = 'auto';
    					gal.showslide('next');
    				},
    			gal.setting.displaymode.pause + (gal.setting.displaymode.delay || 0));
    		});
    	}, fadeSlideShow.sync.duration);
    };
    
    fadeSlideShow.sync.numGals = 3; //required - set to number of galleries
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1-home", //ID of blank DIV on page to house Slideshow
    	dimensions: [327, 310], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/slides-home/slide-1a-salad.png", "", "", ""],
    		["images/slides-home/slide-1b-figs.png", "", "", ""],
    		["images/slides-home/slide-1c-pizzachef.png", "", "", ""],
    		["images/slides-home/slide-1d-plumdrink.png"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:3500, cycles:0, wraparound:true},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1750, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: fadeSlideShow.sync
    })
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow2-home", //ID of blank DIV on page to house Slideshow
    	dimensions: [327, 310], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/slides-home/slide-2a-chairs.png", "", "", ""],
    		["images/slides-home/slide-2b-entree.png", "", "", ""],
    		["images/slides-home/slide-2c-art-diners.png", "", "", ""],
    		["images/slides-home/slide-2d-interior-entry.png"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:3500, cycles:0, wraparound:true, delay:1750},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1750, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: fadeSlideShow.sync
    })
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow3-home", //ID of blank DIV on page to house Slideshow
    	dimensions: [327, 310], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/slides-home/slide-3a-sign.png", "", "", ""],
    		["images/slides-home/slide-3b-entrance.png", "", "", ""],
    		["images/slides-home/slide-3c-tiramisu.png", "", "", ""],
    		["images/slides-home/slide-3d-brett-lorraine.png"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:3500, cycles:0, wraparound:true, delay:3500},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1750, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: fadeSlideShow.sync
    })
    
    </script>
    see also:

    http://www.dynamicdrive.com/forums/s...t-on-page-land

    and:

    http://www.dynamicdrive.com/forums/s...cond-slideshow
    Last edited by jscheuer1; 03-20-2013 at 04:13 PM. Reason: add last link
    - John
    ________________________

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

Similar Threads

  1. Ultimate Fade-In Slideshow timing
    By Puckspeare in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-21-2011, 04:07 AM
  2. Ultimate Fade-in Slideshow v2.4 Timing Issues
    By krislynch in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-22-2010, 03:07 AM
  3. Ultimate Fade In Slideshow: Multiple Instances
    By vlastanovak in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-25-2010, 10:43 AM
  4. *Linking to Specific "fadeshows" with Ultimate Fade-In Slideshow Script
    By netlooks in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-13-2009, 06:34 PM
  5. how to slow down fade timing in ultimate slideshow?
    By tarkin789 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-05-2008, 06:55 AM

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
  •