Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

Thread: How to delay second slideshow

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Well, that's what the sync code does. If you want no slides at first, you don't want this code. You want a timeout for the entire slideshow.

    For that -

    To reserve space for the slideshow, put this in your stylesheet:

    Code:
    #fadeshow1 {width: 760px; height: 190px;}
    And replace all of this:

    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;
    
    	function over(e){
    		var id = this.id, typeBool = e.type === 'mouseenter', showHide = typeBool? 'show' : 'hide';
    		jQuery.each(thegals, function(i, gal){
    			if(gal.setting.wrapperid !== id){
    				gal.setting.ismouseover = typeBool;
    				if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(showHide);}
    			}
    		});
    	}
    
    	setTimeout(function(){
    		jQuery.each(thegals, function(i, gal){
    			gal.setting.$wrapperdiv.bind('mouseenter mouseleave', over);
    			gal.setting.playtimer = 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 = 1; //required - set to number of galleries
    
    
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [760, 190], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/slide-1.png", "", "", ""],
    		["images/slide-2.png", "", "", ""],
    		["images/slide-3.png", "", "", ""],
    		["images/slide-4.png", "", "", ""],
    		["images/slide-5.png", "", "", ""],
    		["images/slide-6.png", "", "", ""],
    		["images/slide-7.png", "", "", ""],
    		["images/slide-8.png", "", "", ""]
    	],
    	displaymode: {type:'manual', pause:800, cycles:1, wraparound:true, delay:1250},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 400, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: function(){
    		--this.setting.totalsteps;
    		fadeSlideShow.sync.call(this);
    	}
    
    })
    
    
    </script>
    With:

    Code:
    <script type="text/javascript">
    setTimeout(function(){
    	window.mygallery=new fadeSlideShow({
    		wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    		dimensions: [760, 190], //width/height of gallery in pixels. Should reflect dimensions of largest image
    		imagearray: [
    			["images/slide-1.png", "", "", ""],
    			["images/slide-2.png", "", "", ""],
    			["images/slide-3.png", "", "", ""],
    			["images/slide-4.png", "", "", ""],
    			["images/slide-5.png", "", "", ""],
    			["images/slide-6.png", "", "", ""],
    			["images/slide-7.png", "", "", ""],
    			["images/slide-8.png", "", "", ""]
    		],
    		displaymode: {type:'auto', pause:800, cycles:1, wraparound:false},
    		persist: false, //remember last viewed slide and recall within same session?
    		fadeduration: 400, //transition duration (milliseconds)
    		descreveal: "ondemand",
    		togglerid: "",
    		oninit: function(){
    			--this.setting.totalsteps;
    		}
    	
    	});
    }, 1250);
    </script>
    Notice the red 1250 at the end there? That's the number of milliseconds delay for the show. You might want it to be like 2500 for a more dramatic effect.
    - John
    ________________________

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

  2. #12
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Thanks! I think it is still slightly off. It looks like the first slide is now 'blinking' at the begining of the script. It shows up and then 'blinks' and then the rest of the slideshow plays out.

    http://www.be-eventproductions.com/temp/index2.html

  3. #13
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    There's garbage from a poor job of cut and paste (most likely) or left over somehow from before, or I cannot be certain how it got there. But in the page's source code there's this:

    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;
    
    	function over(e){
    		var id = this.id, typeBool = e.type === 'mouseenter', showHide = typeBool? 'show' : 'hide';
    		jQuery.each(thegals, function(i, gal){
    			if(gal.setting.wrapperid !== id){
    				gal.setting.ismouseover = typeBool;
    				if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(showHide);}
    			}
    		});
    	}
    
    	setTimeout(function(){
    		jQuery.each(thegals, function(i, gal){
    			gal.setting.$wrapperdiv.bind('mouseenter mouseleave', over);
    			gal.setting.playtimer = 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 = 1; //required - set to number of galleries
    
    
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [760, 190], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/slide-1.png", "", "", ""],
    		["images/slide-2.png", "", "", ""],
    		["images/slide-3.png", "", "", ""],
    		["images/slide-4.png", "", "", ""],
    		["images/slide-5.png", "", "", ""],
    		["images/slide-6.png", "", "", ""],
    		["images/slide-7.png", "", "", ""],
    		["images/slide-8.png", "", "", ""]
    	],
    	displaymode: {type:'manual', pause:800, cycles:1, wraparound:true, delay:1250},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 400, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: function(){
    		--this.setting.totalsteps;
    		fadeSlideShow.sync.call(this);
    	}
    
    })
    
    
    </script>With:
    
    
    Code:
    That doesn't belong. Get rid of it.
    - John
    ________________________

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

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

    katebellami (06-01-2012)

  5. #14
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    thank you! i have been working on this site on little sleep and am going crosseyed at this point!

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
  •