Advanced Search

Results 1 to 6 of 6

Thread: No Fade-in on first image of FadeSlideShow option

  1. #1
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default No Fade-in on first image of FadeSlideShow option

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...deslideshow.js

    3) Describe problem: Less a problem, than an "is it possible?" I'd like the first image of the slideshow to NOT fade-in, though I do want to maintain the dissolves between subsequent slideshow images.

    I am using the script on the Home page of a site I am working on, and everything appears to function great. Really nice work and many thanks for it. I am using the script to loop 6 images on that page. I want visitors to see the full page as soon as possible. I am currently loading a background-image for the fadeshow <div>, which seems to work well. The script loads pretty quickly though, and I think I might be able to do without the background-image...were it not for the fade-in, which is pretty long as I have set my fadeduration to 2500 (which is perfect for the rest for the remainder of the slideshow).

    Can the first image be loaded without a fade in?

    Thanks a lot.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    Certainly, try the below modified .js file, which simply displays the first image shown directly, inside of fading it in.
    DD Admin

  3. #3
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow! Thank you, that did it perfectly. I really can't believe the level of support you are giving your scripts.

    Just an FYI, when I was searching for a solution to my question on your forum, I seem to recall seeing a couple of inquires about not having a black background whilst the image is loading. I saw some suggestions to change the background color via CSS, which works fine if you can match the background color. If you have a pattern or a gradient background it might not work as well. What I have done is remove the 2 references to
    Code:
    background:'black'
    in your script, which seems to have had no negative effect on the script, and which allowed the background of the body element to show during the load. Maybe this will be useful for someone else...

    Thanks again.

  4. #4
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    Certainly, try the below modified .js file, which simply displays the first image shown directly, inside of fading it in.
    I don't see the js file anywhere. Can it be reposted as i am interested in this sollution aswell!

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Over the years as the forum has been updated, some of these attached scripts have gotten lost. But you don't need to modify the fadeslideshow.js file to achieve this. Simply make the highlighted changes/additions to the on page code in the head section as shown:

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [328, 310], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["dongbistroimg/slide-1a-salad.png", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["dongbistroimg/slide-1b-figs.png", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["dongbistroimg/slide-1c-pizzachef.png"],
    		["dongbistroimg/slide-1d-plumdrink.png", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	onslide: function(){
    		this.setting.fadeduration = 500;
    		this.setting.onslide = function(){};
    	},
    	togglerid: ""
    })
    - John
    ________________________

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

  6. #6
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    As nebelung stated: support rocks here!

    I felt free to extend your script slightly to make the first slide also not descreveal (the sliding text of the first frame is shown at once but in the next frames it slides in view):

    Code:
    	
    fadeduration: 1, //transition duration (milliseconds)
    descreveal: "always",
    
    onslide: function(){
    	this.setting.fadeduration = 1000;
    	this.setting.descreveal = "peekaboo";
    	this.setting.onslide = function(){};
    }

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
  •