Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: How to delay second slideshow

  1. #1
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to delay second slideshow

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

    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    Hi,
    On one and the same page I use 2 slideshows. Now I would like to delay the second slideshow so the slideshows alternate nicely. Any suggestions on how to realise this?

    Many thanks,
    Luud

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

    Default

    Add the highlighted code to the beginning of the new fadeSlideShow section, example (add it only once, if you have two separate sections for this add it only to the first section):

    Code:
    <script type="text/javascript" src="fadeslideshow.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">
    
    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 = 2; //required - set to number of galleries
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [550, 460], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["sunflower.jpeg", "", "", "Not . . .
    Then, in one and only one of your two new fadeSlideShow calls add a delay to the displaymode, example:

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [550, 460], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["sunflower.jpeg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["flip-flops.jpeg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["rubber-ring.jpeg"],
    		["sand-castle.jpeg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true, delay:1250},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: fadeSlideShow.sync
    })
    Also add the oninit call as shown, but do that with both of them. Don't miss the added comma after the togglerid value.

    Notice also that the displaymode type is 'manual', they should both be set that way, and ideally they should both have the same pause and fadeduration. The cycles should be 0 or at least the same between the two of them. And the wraparaound should be true for both as well.

    The added delay that you use would then ideally be half of the pause.

    If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  3. #3
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Many thanks John. Works just fine now.

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

    Default

    Hi - I am actually combining this with another very helpful function you provided yesterday which tells the slideshow to stop on the last image. How do I marry the two?

    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 = 2; //required - set to number of galleries
    
    
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [760, 185], //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, 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;
    	}
    
    })
    
    
    </script>

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

    Default

    Follow the same instructions in this thread, except for the oninit. It should look like so for both slideshows:

    Code:
    	oninit: function(){
    		--this.setting.totalsteps;
    		fadeSlideShow.sync.call(this);
    	}
    - John
    ________________________

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

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

    Default

    Thanks! It actually doesnt seem to be working. I only have 1 slideshow, so I changed it to 1 in the number area.

    Code:
    <script type="text/javascript" src="fadeslideshow.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">
    
    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, 185], //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, 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>

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

    Default

    There could also be other problems but you have to set the displaymode type to manual:

    Code:
    displaymode: {type:'manual', pause:800, cycles:1, wraparound:false, delay:1250},
    Not (as you have it):

    Code:
    displaymode: {type:'auto', pause:800, cycles:1, wraparound:false, delay:1250},
    But with only one show, there's no reason to use the fadeSlideShow.sync code. Get rid of it and change the the init back to:

    Code:
    	oninit: function(){
    		--this.setting.totalsteps;
    	}
    However, I just tried this out to be sure and it works. If all you're going for an initial delay, that's what happens. If there's some other problem, and/or you want more help:

    Please include a link to the page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 05-30-2012 at 11:57 PM. Reason: tried it out, later saw something
    - John
    ________________________

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

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

    Default

    thanks! there is only one slideshow, and I would like it to cycle once, but I would like a slight delay before playing. Here is the link to the site. thank you!!
    http://www.be-eventproductions.com/temp/

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

    Default

    Quote Originally Posted by jscheuer1 View Post
    Notice also that the displaymode type is 'manual', they should both be set that way, and ideally they should both have the same pause and fadeduration. The cycles should be 0 or at least the same between the two of them. And the wraparaound should be true for both as well.
    I don't see the changes to the displaymode line as recommended (see above quote) in this thread. And of course you have to add the fadeSlideShow.sync.call(this); to the oninit From what the page is/was when I looked at it, change:

    Code:
    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:'auto', pause:800, cycles:1, wraparound:false, 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;
    	}
    
    })
    to:

    Code:
    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);
    	}
    
    })
    - John
    ________________________

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

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

    Default

    thanks! Unfortunately that actually delays the 2nd slide. So the first slide appears right away, then there is a long pause between the first and second slides. I posted the updated page at the same link.

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
  •