Ultimate Fade-in (v1.51) fade transition time

[photo]

1) Script Title: Ultimate Fade-in slideshow (v1.51)

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

3) Describe problem: I know you can change the interval between changes of image... But how can I change the length of fade time on the image transition? Also is it possible to vary the style of the transition?

[jscheuer1]

I will answer the second question first, as it is easy. No.

Now, the first question can be worked with, but it is a little tricky. There are two places in the script that potentially adjust the speed/duration of the the fading effect:

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempob . . .

and:

fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)

The smaller the first number, the slower things will go, but it needs to be a number that divides evenly into 100, like 20, 10, 5, or 2 - in fact, those are the only values that are practical in my experience.

The smaller the second number, the faster things will go. The smallest number you should use is 20. There is no other limit, but numbers that are much more than 70 will likely result in a noticeable choppiness.

By manipulating these two numbers, you can get the script to use just about any reasonable fade duration. Through trial and error, you can also find a way that does so in a smooth looking fashion, or you might get lucky on the first try.

One other thing to consider is - If the amount of time that it takes to fade something in is greater than the time between images, it will never fade all the way in.

[photo]

Many thanks.... will give it a try.

[photo]

Brilliant! Your suggested extremes of 2 and 70 worked a dream on my local server, and hopefully it will be the same on a remote server. Excellent script and your help is really appreciated.

[photo]

I'd like to add a follow-up question.

Can I call the Ultimate Fade-in slideshow script to provide the background image to a DIV tag?

I can achieve this with another script, example below (where "contenthead" is the style class ID)...

<!--start random image script -->
<script type="text/javascript" language="javascript">var path = 'http://localhost/~wizPB/blog/dg-images/';
var BGs = new Array(
'0.jpg' ,
'1.jpg' ,
'2.jpg',
'3.jpg' ,
'4.jpg' ,
'5.jpg'
);

function randBG() {
var now = new Date();
var number = now.getSeconds() % BGs.length;
document.getElementById('contenthead').style.background = 'url(' + path + BGs[number] + ')';
}

onload = randBG;</script>
<!-- end random image script -->

<div id="contenthead">

[jscheuer1]

With modification, maybe, but I doubt it. U-Fade works partly by having three divisions. One is a relatively positioned container for the other two absolutely positioned ones. It is the foreground images in the two absolutely positioned divisions that change and their respective divisions that fade. It is their positioning, in the same spot, and their changing (escalating) z-indexes, that makes them appear to fade into and out of each other. This could be done with one division, one background image and one foreground image and/or text, but not with two background images. At least not without involving the multiple divisions again.

Now, you could absolutely or relatively position yet another division on top of the existing show and give it a really huge z-index value. It would then (for all practical purposes) appear to have the slide show as a background image, as long as its background were transparent.

The only potential problems I can think of are:

• In all browsers - the escalating z-index values of the show's divisions would eventually cover the 'top' division. This could be overcome by using the Swiss Army script which swaps out z-index values, rather than escalating them, or by modifying U-Fade to swap, rather than escalate. With a really high z-index value of - say, 9999999999999999, it would take an awfully long time for this to even be an issue in the first place.
• In IE 7 - any text appearing over the fading divisions beneath it might exhibit loss of anti-aliasing Clear Type characteristics, making it appear odd at best. If the top division is truly independent of the show's divisions (outside of them), this shouldn't be a problem.

Neither of these should be a problem if you were to do it like so:

<div style="position:relative;">

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 0)
 
</script>
<div style="position:absolute;top:0;left:0;z-index:999999999999999999;">Your Top Content Here</div>
</div>

Various dimensions (heights and/or widths) may need to be assigned/adjusted.