Ciao a tutti, sono nuovo.
Premessa: sono inesperto di JS
Ho una semplicissima galleria (è un esempio che ho trovato su html.it e scaricato per inserire in una pagina html. ). Quando ripeto il div slideshow che la contiene, le immagini nel secondo div non vengono visualizzate.
Immagino che sia un conflitto del file js ma non riesco a risolverlo.
Ho provato a dare un id diverso al secondo div ma il risultato è pessimo.
Vi posto i codici:

codice HTML:
<head>
<link rel="stylesheet" href='slideshow.css' type="text/css" />
<script type="text/javascript" src="xfade2.js"></script>

<title>Javascript HTML:it - Demo Slideshow con effetto fade</title>
</head>
<body>
<h1>Slideshow con effetto fade</h1>
<div id="slideshow">    
<img        src="terra.jpg"        
 alt="Terra"        
 title="HTML.it"        
 onclick="parent.location='http://www.html.it'"    />    
 <img        src="fuoco.jpg"        
alt="Fuoco"        
title="HTML.it - CSS"        
onclick="parent.location='http://css.html.it'"    />    
<img        src="aria.jpg"        
alt="Aria"        
title="HTML.it - Javascript"        
onclick="parent.location='http://javascript.html.it'"    />    
<img        src="acqua.jpg"        
alt="Acqua"        
title="HTML.it - PHP"        
onclick="parent.location='http://php.html.it'"    />
</div> 

</body>
</html>


Io vorrei ripetere il div "slideshow".

codice:
/*    Image Cross Fade Redux
    Version 1.0
    Last revision: 02.15.2006
    steve@slayeroffice.com


    Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html
*/


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('slideshow').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) + ')';
    }
}
Ho provato a creare un secondo file .js modificando l'id di "slideshow" così [imgs = d.getElementById('2slideshow').getElementsByTagNam e('img');] , chiamando così ovviamente anche il secondo div. Il risultato è che la prima gallery funziona bene e la seconda "sbrocca".
Mi date una mano? Il file li potete scaricare al link sopra. Grazie!
Marco