Results 1 to 6 of 6

Thread: Ultimate Fade-In Slideshow transition options...

  1. #1
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-In Slideshow transition options...

    1) Script Title: Ultimate Fade In Slideshow v2.0-

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

    3) Describe problem: This is more of a question versus a problem... I'm wondering If I can have images fade to black and then to the next image versus having it go from image to image... Also; if not i realize I can just load a solid black image in between each image file; but can I then control the timing of how long that appears; or does each image need in the array have the same timing?

    Thanks!

  2. #2
    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

    Easiest way would be to make every other image a small transparent .gif. It will be centered, and the black background will show through. As for the timing variation, that can be accomplished via the oninit and onslide events, example:

    Code:
    <script type="text/javascript">
    
    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: [
    			["transparent_1px.gif"],
    			["http://i26.tinypic.com/11l7ls0.jpg", "#what", "", "<a style='color: #fff;' href='http://www.google.com/'>Nothing</a> beats relaxing next to the pool when the weather is hot."],
    			["transparent_1px.gif"],
    			["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    			["transparent_1px.gif"],
    			["http://i30.tinypic.com/531q3n.jpg"],
    			["transparent_1px.gif"],
    			["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:4000, blackpause:500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: /apple|google/i.test(navigator.vendor)? "always" : "ondemand",
    	togglerid: "",
    	oninit: function(){
    		var d = this.setting.displaymode;
    		d.npause = d.pause;
    	},
    	onslide: function(){
    		var d = this.setting.displaymode;
    		d.pause = d.pause === d.npause? d.blackpause : d.npause;
    	}
    })
    
    </script>
    Don't miss the added comma (red) after the togglerid value and configure the new displaymode property blackpause (also red) as desired. It should probably be at least as long as the fadeduration.

    If you want more help:

    Please post a link to a 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. The Following User Says Thank You to jscheuer1 For This Useful Post:

    rmastal (12-14-2011)

  4. #3
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That's brilliant... thank you! I had a feeling it had to do with the oninit function.

  5. #4
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I have a follow up to this; it seems to be along the same lines.

    My slideshow has 23 images in it; and I want to speed up the transition of image 18 and 19... would I need to just write out the cadence using the onslide function?

    onslide: function(){
    var d = this.setting.displaymode;
    d.pause = d.pause === d.npause? d.blackpause : d.npause;

    so instead of having what's above; take it through all the images? Or can I somehow target a specific image to speed up it's transition?

  6. #5
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    This is the code I'm using currently WITHOUT targeting those images:

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeslideshow", //ID of blank DIV on page to house Slideshow
    	dimensions: [1008, 612], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/transparent_1px.gif"],
    		["images/portfolio_1.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_2.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_3.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_4.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_5.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_6.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_7.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_8.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_9.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_10.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_11.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_12.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_13.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_14.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_15.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_16.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_17.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_18.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_19.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_20.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_21.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_22.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_23.jpg", "", ""] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:4500, blackpause:500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1000, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: function(){
    		var d = this.setting.displaymode;
    		d.npause = d.pause;
    	},
    	onslide: function(){
    		var d = this.setting.displaymode;
    		d.pause = d.pause === d.npause? d.blackpause : d.npause;
    	}
    })
    
    
    
    
    </script>

  7. #6
    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

    OK, because of the added blank images the first image, which would have been index 0 is now 1 (0 + 1 + 0). All of the images are increased by 1 + whatever their original slot would have been, so the second image that would have been index 1 is now 3 (1 + 1 + 1), the third which would have been 2 is now 5 (2 + 1 + 2) and so on. But the way you're numbering the images isn't 0 based, it starts at 1, as long as you continue to do that we can arrive at your number by adding 1 to the actual 0 based index and dividing by 2. In javascript that's:

    Code:
    (index + 1) /2
    Here's what to do, change the the onslide function to:

    Code:
    	onslide: function(fglayer, index){
    		var d = this.setting.displaymode;
    		d.pause = d[(index + 1) /2] || (index % 2? d.npause : d.blackpause);
    	}
    Which checks to see if an indexed pause is set, if not sets the pause on the basis of the index being even or odd. Now you can configure individual pauses by the numbers you're using in the displaymode property. So putting it all together:

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeslideshow", //ID of blank DIV on page to house Slideshow
    	dimensions: [1008, 612], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/transparent_1px.gif"],
    		["images/portfolio_1.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_2.jpg", "", ""],
    		["images/transparent_ . . .
    
    		. . . s/portfolio_21.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_22.jpg", "", ""],
    		["images/transparent_1px.gif"],
    		["images/portfolio_23.jpg", "", ""] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:4500, blackpause:500, 18:2000, 19:1500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1000, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: function(){
    		var d = this.setting.displaymode;
    		d.npause = d.pause;
    	},
    	onslide: function(fglayer, index){
    		var d = this.setting.displaymode;
    		d.pause = d[(index + 1) /2] || (index % 2? d.npause : d.blackpause);
    	}
    })

    I was playing around with this a bit more and found we can use a function to set up the imagearray so we don't need all those ["images/transparent_1px.gif"] entries:

    Code:
    <script type="text/javascript">
    fadeSlideShow.ims = function(ims){
    		for (var i = ims.length; i > 0; --i){
    			ims.splice(i - 1, 0, ["images/transparent_1px.gif"]);
    		}
    		return ims;
    };
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeslideshow", //ID of blank DIV on page to house Slideshow
    	dimensions: [1008, 612], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: fadeSlideShow.ims([
    		["images/portfolio_1.jpg", "", ""],
    		["images/portfolio_2.jpg", "", ""],
    		["images/portfolio_3.jpg", "", ""],
    		["images/portfolio_4.jpg", "", ""],
    		["images/portfolio_5.jpg", "", ""],
    		["images/portfolio_6.jpg", "", ""],
    		["images/portfolio_7.jpg", "", ""],
    		["images/portfolio_8.jpg", "", ""],
    		["images/portfolio_9.jpg", "", ""],
    		["images/portfolio_10.jpg", "", ""],
    		["images/portfolio_11.jpg", "", ""],
    		["images/portfolio_12.jpg", "", ""],
    		["images/portfolio_13.jpg", "", ""],
    		["images/portfolio_14.jpg", "", ""],
    		["images/portfolio_15.jpg", "", ""],
    		["images/portfolio_16.jpg", "", ""],
    		["images/portfolio_17.jpg", "", ""],
    		["images/portfolio_18.jpg", "", ""],
    		["images/portfolio_19.jpg", "", ""],
    		["images/portfolio_20.jpg", "", ""],
    		["images/portfolio_21.jpg", "", ""],
    		["images/portfolio_22.jpg", "", ""],
    		["images/portfolio_23.jpg", "", ""] //<--no trailing comma after very last image element!
    	]),
    	displaymode: {type:'auto', pause:4500, blackpause:500, 18:2000, 19:1500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1000, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: function(){
    		var d = this.setting.displaymode;
    		d.npause = d.pause;
    	},
    	onslide: function(fglayer, index){
    		var d = this.setting.displaymode;
    		d.pause = d[(index + 1) /2] || (index % 2? d.npause : d.blackpause);
    	}
    })
    
    </script>
    Last edited by jscheuer1; 12-22-2011 at 04:02 AM. Reason: add - I was playing around with this . . .
    - John
    ________________________

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

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
  •