...

View Full Version : 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:

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 (http://script.aculo.us/dist/scriptaculous-js-1.6.5.zip). 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.




/************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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum