First, I should say that I don’t know Javascript. Someone has asked me to fix this rotating image feature.
The fade in works fine but there is no fade out—or at least it’s very abrupt. I would like the fade-out to be the same as the fade-in.
Does anyone know how I can adjust this Javascript file to fix that?
Any help would be much, much appreciated!
Thank you.
Here’s the link.
Like you, I don’t know JS well enough to fix this, but if all else fails, you could try out jQuery Cycle, which is a very reliable alternative to this. It is a bit heavier on code (as you have to link to the jQuery library—preferably on Google) but it works nicely.
Here is the Cycle home page.
I was trying to avoid redoing it but I might have to go that route if I don’t find a fix for it.
Thanks!
I think the problem is in the example script, which you have used. When you visit that example page (the ‘updated’ one), the first sequence of images are uncontrolled, after which they seem to come together and cross-fade OK. Anyway, I think I found the problems in the init function, and your adjusted page is below. If you are interested, significant changes are marked with double asterisks. A few minor/cosmetic changes were also made. I haven’t checked your CSS, but make sure all your slideshow images have position: absolute.
Those lines which toggle the display property between ‘block’ (for the active image pair) and ‘none’ (for any passive images) are not really required, so they are commented out. The script is using opacity to control what the viewer sees, so there seemed little point in also setting the images to display:none while they are passive, when the viewer can’t see them anyway as their opacities are zero.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="_css/reuscher.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#rotator {
width: 1000px;
margin: 0 auto;
height: 332px;
}
</style>
</head>
<body>
<div id="rotator">
<img src="_images/home/home-photo1.jpg" alt="" />
<img src="_images/home/home-photo2.jpg" alt="" />
<img src="_images/home/home-photo3.jpg" alt="" />
</div>
<script type="text/javascript">
/*
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
Rewrite of old code found here:
http://slayeroffice.com/code/imageCrossFade/index.html
Updated here:
http://slayeroffice.com/code/imageCrossFade/xfade2.html
*/
window.addEventListener?
window.addEventListener('load',so_init,false):
window.attachEvent('onload',so_init);
var d=document,
imgs = new Array(),
current=0;
// **This function needs to be global - called by both functions below
function setOpacity(obj) {
if(obj.xOpacity>1.0) {
obj.xOpacity = 1.0;
return;
}
obj.style.MozOpacity = obj.xOpacity/1.01;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
obj.style.opacity = obj.xOpacity;
}
function so_init(){
if(!d.getElementById || !d.createElement) return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(var i=1;i<imgs.length;i++) {
imgs[i].xOpacity = 0;
setOpacity(imgs[i]); // ** required addition
}
// imgs[0].style.display = 'block';
imgs[0].xOpacity = 1.0;
setOpacity(imgs[0]); // ** required addition
setTimeout(so_xfade,3000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
// imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0){
// imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,2000);
}
else {
setTimeout(so_xfade,50);
}
}
</script>
</body>
</html>
Without them, though, the images appear one atop another, so with overflow hidden on the container images 2 and 3 don’t show.
Hmmm … thanks for mentioning that … I didn’t look through the CSS file, but just mentioned (at end of my first paragraph) the need to absolutely position the images. But having just checked, the existing CSS does not have that, so it will need the following addition:
#rotator img { position: absolute; }
… so as to ensure all the images do sit atop one-another and can cross-fade. I did simplify the div styling for this example, but the cross-fading works perfectly.
This script does actually work by having all the images stacked one-atop-the-other. All but 2 of the images, at any one time, have opacities of zero, hence are invisible. The other 2 are the currently cross-fading images. That’s why I couldn’t see an additional need for the display toggling - the opacity is doing all the work. Anyway, I did check it in several browsers, and those 3 commented display-setting lines make no visible difference to the cross-fading, whether they are in or out.
Nice work, lnhicks. Very impressive. 
I love it. While I slumber you’ve solved all my problems.
It works!
Thank you both.
If you are after a really small script for doing all sorts of fancy image transitions with javaScript then take a look at the one written by Brothercake at http://www.brothercake.com/site/resources/scripts/transitions/