Results 1 to 5 of 5

Thread: Tweak for Ultimate Fade-in Slideshow desired

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

    Thumbs up Tweak for Ultimate Fade-in Slideshow desired

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

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

    3) Describe problem: This script has served me well in the past and I'm grateful to have found it. What I'm looking to do most recently is to, instead of having it cross-fade into the next image, I'd like the image to fade out completely, pause for brief moment, then fade in the next. In other words, a series of images fading in and out, but with a pause in-between. Is this possible with this script, or is there another option out there?

    Thanks!

  2. #2
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow

    Anyone? Anyone?

    I guess I can assume this can't be done with this script. Does anyone know of anything similar that I might use to attain this effect?

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

    Just make up a blank image of the color you want, and make it be every other image in the imagearray. If you only want the blank image to show for a short time - say 500 milliseconds, but you want the other images to show for 3 seconds each, you can make the pause 500, and put each real image in 6 times in a row. So it would be 6 of the same image, one blank, 6 of the next image, one blank, and so on. The only problem would be if you wanted to randomize. That could be worked around by making a customized randomizing function.
    Last edited by jscheuer1; 04-22-2011 at 03:42 AM. Reason: English Usage
    - John
    ________________________

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

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

    I was playing with this a bit more and came up with a front end of sorts that will do those calculations for you. Instead of the on page portion of the script shown on the demo page, do it like so (additions highlighted):

    Code:
    <script type="text/javascript">
    fadeSlideShow.makearray = function(cObj){
    	var newarray = [], showframes = Math.max(1, Math.round(cObj.showtime/(cObj.gap + cObj.fadeduration)));
    	if(cObj.random){
    		cObj.images.sort(function(){return 0.5 - Math.random();});
    	}
    	jQuery.each(cObj.images, function(){
    			for (var i = showframes; i > 0; --i){
    				newarray.push(this);
    			}
    			newarray.push([cObj.blank]);
    		});
    	return newarray;
    };
    
    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: fadeSlideShow.makearray({images: [
    		["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!
    	], showtime: 3000, gap: 250, fadeduration: 500, blank: 'trans.png', random: true}),
    	displaymode: {type:'auto', pause:250, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    });
    
    </script>
    Notes:

    • showtime: how long you want each of your actual images displayed.
    • gap: how long you want the blank image to show between each actual image, set the displaymode pause: to this same number.
    • fadeduration: the duration of the fade, set this the same as the displaymode fadeduration: number.
    • blank: path to your blank image, can be a small transparent image, or a solid color image of the same dimensions as the slideshow.
    • random: should the images be randomized? (true/false), set this here. In the original call (the var mygallery = new fadeSlideShow part), always use false for its displaymode randomize: or leave that property off.


    If you have more than one slideshow on the page, you only need the fadeSlideShow.makearray function once, it may be used by all of the shows on a page.
    Last edited by jscheuer1; 04-26-2011 at 05:24 AM. Reason: remove erroneous comment from script, clarify last itemized note
    - John
    ________________________

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

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

    Thumbs up Yesss

    Many thanks for rocking this out. Works like a charm. Should add it to the script page for an extra option.

    Just made a donation to the IRC to show my thanks!

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
  •