Hi, I recently applied the code below to my site, to enable a good, non-Flash slideshow. I'm happy with the results, however, I want to add another slide show on the same page. Right now there is one (rotator) located at margin-top:120px and margin-left:-311px of my page but I'd like to have another one (rotator2) located at margin-top:120px and margin-left:300px. How can I accomplish this using the code below? Someone please help!


(slideshow1.css)
----------------

*
{
margin: 0;
padding: 0;
}

#rotator
{
border: 0;
cursor: pointer;
overflow: hidden;
position:absolute;
left:50%;
margin-top:120px;
margin-left:-311px;
width: 400px;
height: 136px;
}

#rotator img
{
border: 0;
cursor: pointer;
width: 400px;
height: 136px;
}


(slideshow2.css)
----------------

#rotator img
{
display: none;
position: absolute;
top: 0;
left: 0;
}

(xfade2.js)
------------

window.addEventListener?window.addEventListener('l oad',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,8000);
}

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

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) + ')';
}
}


(Goes on HTML Page)
---------------------
<div id="rotator">
<a href="http://www.mywebsite.com/page1.html"><img src="/image1.jpg"</a>
<a href="http://www.mywebsite.com/page2.html"><img src="/image2.jpg"</a>
<a href="http://www.mywebsite.com/page3.html"><img src="/image3.jpg"</a>
</div>

change the top: 0; to a higher or lower number

Any one else care to help? Thanks FlatRat but that wasn't really a solution to the problem.

i am a noob in js any 1 no any good tuts ?

well, as far as i can see you need a different id for rotator and you need to change imgs variable to something else in the second script

Thanks folks. I have already tried your suggestions but I haven't gotten it to work. At this point, i've found another solution - which doesn't solve the problem of the slideshow but delivers the ultimate effect I was after. There has to be a way to resolve this issue though.