Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/11/2012, 12:56
Avatar de nixolax
nixolax
 
Fecha de Ingreso: enero-2008
Ubicación: Villa María, Pcia de Córdoba
Mensajes: 45
Antigüedad: 16 años, 3 meses
Puntos: 0
Imposible repetir js en la misma página

Hola, buenas tardes. Estoy teniendo un problema hace bastante tiempo y me gustaría que me lo pudiesen solucionar.

El problema es que con un js, style css y unos div, no puedo poner dos galerías en una misma página. Más que una galería, sería como un pasador de imágenes.

Tengo este js por duplicado, cambiando el rotator1 por rotator2. es decir, tengo dos js, uno que llama al elemento rotator1 y otro igual solo que llama a rotator2

Cita:
<script type="text/javascript">
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('rotator1').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) + ')';
}
}
</script>
tengo este style

Cita:
<style rel="stylesheet" type="text/css">
#rotator1 {
border: 8px outset #000;
display:block;
padding:0;
overflow: hidden;
position: relative;
width:600px;
height: 450px;
}
#rotator1 img {
border: 0;
padding: 0;
width: 100%;
}
#rotator2 {
border: 8px outset #000;
display:block;
padding:0;
overflow: hidden;
position: relative;
width:600px;
height: 450px;
}
#rotator2 img {
border: 0;
padding: 0;
width: 100%;
}
</style>
entonces, por qué no funciona esto?:

Cita:
<div id="rotator1">
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa1.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa2.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa3.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa4.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa5.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa6.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa7.jpg" /></center>
</div><br><br>

<div id="rotator2">
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio1.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio2.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio3.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio4.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio5.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio6.jpg" /></center>
</div>