PDA

View Full Version : No Fade-in on first image of FadeSlideShow option



nebelung
09-07-2010, 11:30 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.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.

ddadmin
09-08-2010, 04:05 AM
Certainly, try the below modified .js file, which simply displays the first image shown directly, inside of fading it in.

nebelung
09-08-2010, 06:08 AM
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
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.

Gamunity
01-15-2014, 04:07 PM
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!

jscheuer1
01-16-2014, 02:08 AM
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:


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: ""
})

Gamunity
01-16-2014, 08:34 AM
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):




fadeduration: 1, //transition duration (milliseconds)
descreveal: "always",

onslide: function(){
this.setting.fadeduration = 1000;
this.setting.descreveal = "peekaboo";
this.setting.onslide = function(){};
}