Fade to black and more..

[fabiospark]

1) Script Title: Ultimate Fadein Slideshow v1.5

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

3) Describe problem: I'm trying to mod it to get these things:

- fade to black instead of cross fading
- make pausing area a few pixels (or percent) wider and taller than the image and color it in dark grey (or any other color)
- position the pausing area in the middle of the screen and the slide in the middle of the area

In my noobieness I have already(!) managed to make the fade smoother and create a variable to easily change the minimum fading step but now some help is needed

Thanks.

[jscheuer1]

U Fade doesn't lend itself easily to both expanding the area and centering the images within that area. Swiss Army:

http://www.dynamicdrive.com/dynamici...army/index.htm

does, and can be made to otherwise look just like U fade.

To get Swiss Army to have a larger area, just set its height and width larger than that of your images, centering is automatic. To have that area around them be gray use the fadecolor property set to gray.

To fade to black in either script, just make up a black image and have every other item in the image array set to use it.

[fabiospark]

To fade to black in either script, just make up a black image and have every other item in the image array set to use it.

In this way, the black frame will stay on too long (there's nothing interesting to watch in a black frame)
I think the best solution would be to have 3 different time to set: fading time (in/out); picture at full opacity time and black frame time.

Where should I look to see if, in my noobiesness, I can understand and try to mod the cross fading process? Maybe just delaying the start of the fade-in of the n+1 image, if it is possible?

I gave a look at the swissarmy.js file but I'm not sure how things works there.
Do you mind explaining in details a couple of things?

ì -

this.delay=imgs.delay? imgs.delay : delay? delay : 3000+iss.length*750;

What does all this mean?

ìì - which is the cross fading section?

ììì - where do you set the mouseover area size?

To get Swiss Army to have a larger area, just set its height and width larger than that of your images, centering is automatic

It would be nice if that area would resize to the images+border size.
Am I correct thinking that this area is the mouse over one? (border included?)

Thanks ans sorry for the many questions. Keep in mind that I don't know all the exact syntax of Javascript.

[jscheuer1]

I see what you are getting at with the delay between images being too much with a black one. However, you can set the overall delay to 1000 and then have like:

image 1
image 1
image 1
black
image 2
image 2
image 2
black

and so on.

i - This:

this.delay=imgs.delay? imgs.delay : delay? delay : 3000+iss.length*750;

Means that the delay between images for a given show will be in order of preference, if supplied:

that set as a property of the array (slides.delay=3000;)

or that set in the in body call:

new inter_slide(slides, 3000)

or if not set in either place, it will be 3000 for the first show on a page, 3750 for the second show, 4500 for the third show, and so on.

The bottom line though is that it only sets the delay between images for a given show, not for a given image in a show.

ii - This is the main cross fading section, but not where the timing between images happens, and it is dependant upon other parts of the script, as they are upon it:

inter_slide.prototype.fadepic=function(){
if (this.fade&&this.degree<100){
this.faded=0
this.degree+=10
if (this.tempobj.filters&&this.tempobj.filters[0]){
if (typeof this.tempobj.filters[0].opacity=="number") //if IE6+
this.tempobj.filters[0].opacity=this.degree
else //else if IE5.5-
this.tempobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (this.tempobj.style.MozOpacity)
this.tempobj.style.MozOpacity=this.degree/101
else if (this.tempobj.style.KhtmlOpacity)
this.tempobj.style.KhtmlOpacity=this.degree/100
else if (this.tempobj.style.opacity&&!this.tempobj.filters)
this.tempobj.style.opacity=this.degree/101
}
else{
this.faded=1
clearInterval(this.fadeclear)
this.nextcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_0" : this.canvasbase+"_1"
this.tempobj=this.go(this.nextcanvas)
if(this.playing)
this.changeimg()
}
}

iii - There is nowhere that the mouseover area size is set as distinct from the size of the image area. It is the size of the entire fading canvas overlays section, and is set by the width and height properties, which in turn are set in the same order of preference as the delay mentioned above, except that if not set, they default to the native height and width of the first image.

If you have an image 100 x 100 and the slide show's dimensions are set to 200 x 200 and the fadecolor property is set to gray, you will have a 200 x 200 pause area, with a 100 x 100 image centered inside of it. The actual border is irrelevant, but if set will be included in this area. The portion of the area between the centered image and outer dimensions will be gray, as set. By virtue of the math involved, it will look like a 50px solid gray border. If the next image is 150 x 150, it will look like a 25px solid gray border, etc. These same principals would apply with rectangular shapes (say 340 x 250) for an image and/or for the dimensions of the show. To get this effect however, the dimensions of the show must be set, and must be set wider than the largest width image in the show and taller than the highest height image in the show.