Slideshow is fading out but not in

dbates · 12-05-2006, 07:36 PM

Hey all,

I'm installing a slideshow script to rotate through several images, and I want each image to fade out and then the next one to fade back in. The script I found has fade-out, but not fade-in, and I don't know how to get the fade-in part working...

here's the code:

Code:

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

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(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = 'block';
	imgs[0].xOpacity = .99;

	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,3000);
	}
	else
	{
		setTimeout(so_xfade,50);
	}

	function setOpacity(obj)
	{
		if(obj.xOpacity>.99)
		{
			obj.xOpacity = .99;
			return;
		}

		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
	}
}

and this is the website that I am putting it on:

http://derbydigitalphoto.com/test/index.php

Thanks!
--Daniel

j9ine · 12-05-2006, 09:41 PM

Try using scriptaculous. You can download it Here. Just unzip and copy all of the .js files to your root directory, or wherever you store you script files. Then add the prototype.js and scriptaculous.js files to your webpage.

Code:

/************test.htm************/
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script>
function fadeOut() {
	new Effect.Fade('test');  //enter the id of the element you wish to fade
}

function fadeIn() {
	new Effect.Appear('test');  //enter the id of the element you wish to fade
}

// you can also include the actual element as the argument instead of the id.
// onclick="new Effect.Fade(this);"
</script>
</head>
<body>
<div style="background:blue; float:none;" id="test">TESTING</div><br>
<form>
<input type="button" onclick="fadeOut();" value="Fade Out"> 
<input type="button" onclick="fadeIn();" value="Fade In">
</form>
</body>
</html>

dbates · 12-06-2006, 07:27 PM

So that code goes into my PHP document (the script src and <script> code?

sorry... I know very little about Javascript right now...

--Daniel