Results 1 to 3 of 3

Thread: fadeinslideshow at end of cycle open another page

  1. #1
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default fadeinslideshow at end of cycle open another page

    1) Script Title: fadeinslideshow

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

    3) Describe question:

    Can the code be set to open another page after the slideshow has completed one cycle?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Add the highlighted as shown to your on page init:

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:1, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: function(){
    		--this.setting.totalsteps;
    	},
    	onslide: function(c, i){
    		if(this.setting.currentstep === this.setting.totalsteps){
    			setTimeout(function(){location.href = 'http://www.dynamicdrive.com/';}, this.setting.displaymode.pause);
    		}
    	}
    })
    Don't miss the added comma (red) after the togglerid value.

    The address in green is the page it will switch to.

    Pay attention to the displaymode line as well, required values red:

    Code:
    	displaymode: {type:'auto', pause:2500, cycles:1, wraparound:false},
    The cycles should be 1 as shown, but if you want it to go through twice before switching, it could be 2. Three times, 3 - etc. Just don't use 0.

    The browser cache may need to be cleared and/or the page refreshed to see changes.

    If 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.

    If you want to get fancy, you can do like so (additions, changes to the above highlighted):

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	nextpage: 'http://www.dynamicdrive.com/',
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "#", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "#", "", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg", "#"],
    		["http://i31.tinypic.com/119w28m.jpg", "#", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:1, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: function(){
    		--this.setting.totalsteps;
    		this.setting.$gallerylayers.find('a').attr({href: this.setting.nextpage, target: '_self'});
    	},
    	onslide: function(){
    		var s = this.setting;
    		if(s.currentstep === s.totalsteps){
    			setTimeout(function(){location.href = s.nextpage;}, s.displaymode.pause);
    		}
    	}
    })
    And for the target div (fadeshow1 in this case) add a title attribute:

    Code:
    <div id="fadeshow1" title="Skip Intro"></div>
    That way clicking on any of the images will skip to the next page, while hovering the slideshow will give a tooltip "Skip Intro". If they watch the whole slideshow, they will be taken to the next page at the end.
    Last edited by jscheuer1; 06-06-2012 at 03:09 PM. Reason: detail
    - John
    ________________________

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

  3. #3
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Perfect, I used the fancy option -- thank you!

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
  •