...

View Full Version : Fading image question



SteveH
06-22-2012, 08:44 PM
Hello

I am using JS here:

http://www.proofreading4students.com/fadeImage.html

I have made a slight modification to the original script by simply adding this to the array:
img_array[3]="test4.jpg";
img_array[4]="test5.jpg"; and changing default.png to test1.jpeg. In fact, I have changed all image formats from png to jpeg.

It looks as if the image fade falters and jumps about - is there a better, more stable way of doing this, please?

Thanks

auslin
06-23-2012, 11:25 AM
The method you are using uses just one image tag for rendering the image, and fades it out progressively to zero opacity (in terms of what you see, to its parent's background color), then fades in the new image. If the parent's background color is white, you'll get a white transition between images.

Apart from that, the slight jerkiness in that script is due to the incremental steps involved in the opacity animation. If you have steps = 15, then in that script, each step is 100/15 (rounded), which is 7 units. So you can improve it a bit by trying step values of perhaps 20, 25, or 50 (instead of 15), which make the increment smaller. You could also try changing the line:


if(n==steps+1){
n-=2;
to:


if(n==steps+1){
n-=1;
By the way, there's a couple of glitches or typos in the markup and styles:


<img src="test1.psd"


background-image:url(http://www.geocities.com/caulolli/taylor.png) no-repeat;
Browsers don't read Photoshop .psd files. And the geocities domain is long gone.


Smoother opacity transitions use different ways of handling the transition. Many use two rendering surfaces - e.g. 2 image elements, one on top of the other. Or sometimes a div or other element is used as the lower element, whose background-image property is used. A new image source is applied to the top element, then its opacity is incremented from 0 to 1.0, and over the previous image (in the lower element). So the new image comes in smoothly, with no fadeout to the background color in between. There are quite a few such examples around; here is one tutorial example:
http://www.cryer.co.uk/resources/javascript/script12slideshow.htm

There are many interesting image transition types here:
http://www.brothercake.com/site/resources/scripts/transitions/

SteveH
06-23-2012, 11:47 AM
Hello auslin

Very many thanks for your valuable and informative reply.

I have taken on board the amendments you suggested (replaced the geocities link, corrected all files to jpeg, altered the time sequence, etc) but the image transition still has that 'shaky' look.

I will take a look at the links you have posted.

Thanks again.

Steve

vwphillips
06-23-2012, 01:35 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<img id="tst" src="http://www.proofreading4students.com/test1.jpg" onmouseover="zxcFadePause('tst');" onmouseout="zxcFadeAuto('tst');" />
<img id="tst2" src="http://www.proofreading4students.com/test1.jpg" onmouseover="zxcFadePause('tst2');" onmouseout="zxcFadeAuto('tst2');" />

<script type="text/javascript">
/*<![CDATA[*/

function zxcFade(o){
var id=o.ID,img=document.getElementById(id),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hin=o.Hold In,hout=o.HoldOut,ary=o.SRCArray,srcs=[],nimg,z0=0;
for (;z0<ary.length;z0++){
srcs[z0]=new Image();
srcs[z0].src=ary[z0];
}
zxcFade['zxc'+id]={
id:id,
img:img,
srcs:srcs,
ms:ms,
hin:typeof(hin)=='number'?hin:ms*2,
hout:typeof(hout)=='number'?hout:50,
cnt:0
}
zxcFadeAuto(id)
}

function zxcFadeAuto(id,ms){
var o=zxcFade['zxc'+id];
if (o){
o.to=setTimeout(function(){ o.auto=true; animate(o,o.img,100,0,new Date(),o.ms); },ms||200);
}
}


function zxcFadePause(id){
var o=zxcFade['zxc'+id];
if (o){
o.auto=false;
clearTimeout(o.to);
}
}

function animate(o,obj,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS); },10);
}
else {
if (t==0){
o.cnt=++o.cnt%o.srcs.length;
obj.src=o.srcs[o.cnt].src;
setTimeout(function(){ animate(o,o.img,0,100,new Date(),o.ms); },o.hout);
}
else if (o.auto){
zxcFadeAuto(o.id,o.hin);
}
}
}

zxcFade({
ID:'tst', // the unique ID name of the image. (string)
SRCArray:[ // an array of the file path and name of the images. (string)
'http://www.proofreading4students.com/test1.jpg',
'http://www.proofreading4students.com/test2.jpg',
'http://www.proofreading4students.com/test3.jpg',
'http://www.proofreading4students.com/test4.jpg',
'http://www.proofreading4students.com/test5.jpg'
],
// FadeDuration:1000, //(optional) the fade duration in milliseconds. (number, default = 1000)
HoldIn:1000, //(optional) the fade in hold duration in milliseconds. (number, default = FadeDuration*2)
HoldOut:100 //(optional) the fade out hold duration in milliseconds. (number, default = 50)
});

zxcFade({
ID:'tst2',
SRCArray:[
'http://www.proofreading4students.com/test1.jpg',
'http://www.proofreading4students.com/test2.jpg',
'http://www.proofreading4students.com/test3.jpg',
'http://www.proofreading4students.com/test4.jpg',
'http://www.proofreading4students.com/test5.jpg'
]
});
/*]]>*/
</script>
</body>

</html>

SteveH
06-23-2012, 03:28 PM
Wow

Thanks for that Vic, I will try it this afternoon!

Thanks for your work and effort.

I noticed you changed the doc. type.

Steve



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum