Image Fader Function [Archive]

View Full Version : Image Fader Function

scriptkeeper

07-23-2003, 08:04 AM

Hello all I have an image fading function for a slideshow. And I would like it to fade out the image change to next image then fade in the new image and I have tried everything I can think of any ideas!

RoyW

07-23-2003, 05:01 PM

See if this works

var fade_direction = -1;

function imageFader()
{
p = p + fade_direction;
document.mainShow.filters.alpha.opacity=p;

if(p==0){
document.images.mainShow.src=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
fade_direction = 1;
}
if(p==100)
fade_direction = -1;
else
fade_timer=setTimeout("imageFader()",0);
}

beetle

07-23-2003, 05:39 PM

If you're comfortable with it being IE-only, the Fade filter (http://msdn.microsoft.com/workshop/author/filter/reference/filters/fade.asp) (known as BlendTrans (http://msdn.microsoft.com/workshop/author/filter/reference/filters/blendtrans.asp) before IE5.5) does exactly that (if you set overlap to 0)

scriptkeeper

07-23-2003, 05:49 PM

Hey thanx Roy! I had figured it out last night but I split it into two functions!

function imageFadeOut(){
fade_timer=setTimeout("imageFadeOut()",0);
if(p>0)p=p-5;
document.mainShow.filters.alpha.opacity=p;
if(p==0){
clearTimeout(fade_timer);
p=0;
document.images.mainShow.src=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
imageFadeIn();
}
}
function imageFadeIn(){
fade_timer2=setTimeout("imageFadeIn()",0);
if(p<100)p=p+5;
document.mainShow.filters.alpha.opacity=p;
if(p==100){
clearTimeout(fade_timer2);
p=100;
}
}

But I think Ill use yours instead thanx again! Oh I have a ? how come you set the timeout in that function but never clear it how come it doesnt keep fading?

scriptkeeper

07-23-2003, 05:51 PM

Well bettle Im comfortable with the fact that any script that I write really works! That doesnt happen very often and Ill take it as an achievment!

beetle

07-23-2003, 05:55 PM

Well, since the two functions up above are IE-only anyways (using the alpha filter) you might as well use one of the transition filters I suggested.

RoyW

07-23-2003, 06:26 PM

Using blend transitions produces a different effect and is IE only
Bland Trans Slide Show (http://www.javascript-fx.com/slideshows/simple/demo1a.html) .
Using opacity fade/out/in you should be able to make it compatible with NS7 (use -moz-opacity) and produces a different effect
Fading Image Slideshow (http://www.javascript-fx.com/slideshows/fader/demo.html)

The reason you don't need to clear the timeout is that when the timer fires the timeout is no longer active. The clearTimeout's you have in your script have no effect.

If you used setInterval then you would need to use clearInterval.

beetle

07-23-2003, 06:34 PM

Wrong, RoyW. You missed something critical I said. You need to set the overlap to 0 on the transition.

blendTrans(duration=2,overlap=0)

:thumbsup:

And you're right - making your script work with Mozilla is possible - the filter are IE-only (which I already stated - twice)

RoyW

07-23-2003, 08:21 PM

I stand corrected, I hadn't read about the 'overlap' parameter.

I guess using the Fade filter with the 'overlap' parameter would provide the same effect.

P.S.
does blendTrans(duration=2,overlap=0) work?

I looked at the doc and it seems that 'overlap' is only valid with the Fade filter?

beetle

07-23-2003, 08:53 PM

I tested this on IE6 and the overlap works fine

lemme know if you can test it in IE 5 or 4.
<html>
<head>
<title>Insert a title you fool!</title>
<style type="text/css">
img {
filter: blendTrans(duration=2,overlap=0);
}
</style>
<script type="text/javascript">

function swap( img )
{
img.filters[0].apply();
img.src = "http://www.pvponline.com/archive/2003/pvp" + ( parseInt( img.src.match( /\d+\.gif$/ ), 10 ) - 1 ) + ".gif";
img.filters[0].play();
}

</script>
</head>

<body>

<img src="http://www.pvponline.com/archive/2003/pvp20030723.gif" onclick="swap(this)"/>

</body>
</html>

RoyW

07-23-2003, 09:02 PM

I tested in IE5.5 and it worked!!

It faded out the first image then faded in the second.

I guess 'overlap' does work with blendTrans (must be an undocumented feature :) )

That's worth knowing, thanks Beetle :thumbsup: .

(I'll try tesing it in IE4 when I get home)

scriptkeeper

07-24-2003, 12:31 AM

Well if the clearTimouts have no effect then how else do I halt the play function seems to have an effect to me?

function stop(){clearTimeout(go_timer);}

should I change it to intervals instead of timouts?

RoyW

07-24-2003, 12:41 AM

Sorry, I didn't see that clearTimout. That one will have an effect.

If you start a timeout using setTimeout then one of 2 things can happen.
1) The timer fires, in which case you don't need to clear the timer with clearTimeout().
2) You want to interrupt (and stop) the timer before it fires. In which case you do call clearTimout().

Sorry I wasn't clear on that, hope the above makes sense.

scriptkeeper

07-24-2003, 12:51 AM

So in other words when I do this

timer=setTimout("someFunction()",1000);

as soon as the 1000 miliseconds has past the timer is done and no need to clear it it does not continue, unlike setInterval which would continue on and on? Correct? So for the 20 ? only 15 more to go!

RoyW

07-24-2003, 12:57 AM

Correct :thumbsup:

beetle

07-24-2003, 01:45 AM

Just FYI, you can also use this syntax for setTimeout()

var timer = setTimeout( someFunction, 1000 );

scriptkeeper

07-24-2003, 01:49 AM

So in other words no quotes and no () hmm Ill keep that in mind!
I thought that I also read somewhere that you could put an expression or condition in place of a function is this true! I might just be speaking jibberish!

beetle

07-24-2003, 03:23 AM

No, but you can use an anonymous function - which allows you to properly call a function with parameters from a timeout, AND keep scope!

var timer = setTimeout( function() { someFunction( someArgument1, someArgument2 ) }, 1000 );

:D