Problema con slideshow

[Jigulina]

Ragazzi ho un problema con una slideshow, vi spiego: in una pagina avrò 2 slideshow, le immagini sono generate da php, il problema è uno: se sono 2 slide all'interno della pagine, ne funziona solo 1 e non capisco il perchè.. questo è il codice:

<div class="header">
<ul class="ppt"> 
<?
$img=mysql_query("Select * from fotobox where tipo=2");
while($array=mysql_fetch_array($img)){?>[*][img]admin/<? echo $array[foto] ?>[/img]
<? } ?>[/list]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');
 
function animate() {
    cur.fadeOut( 5000 );
    if ( cur.attr('class') == 'last' )
        cur = $('.ppt li:first');
    else
        cur = cur.next();
    cur.fadeIn( 5000 );
}
$(function() {
    setInterval( "animate()", 5000 );
} );
</script>

ecco tt questo lo replico 2 volte, solo che funziona solo la prima slideshow, la seconda non va..perchè??

[Brakki]

hai provato a cambiare il nome delle variabili???

[Jigulina]

Si Si ma non funziona lo stesso.. perchè??? vi prego aiutatemi...

[Cibernella]

Ciao Jigulina, ho lo stesso tuo problema...tu hai risolto? Io ho cambiato il nome del div anche nel .css e nella parte del file javascript :

(imgs = d.getElementById('slideshow').getElementsByTagName ('img');

mettendo per es.

(imgs = d.getElementById('slideshow2').getElementsByTagNam e('img');

ma...niente. Se riesci mi posti il procedmento, per favore? Grazie 1000
Ciao

[carmichael]

Se replicassi il tutto due volte "as it is" alla seconda ridefinizione della variabile curr solleveresti une errore runtime nel browser e (dipendentemente) da quest'ultimo il blocco del codice.

Se ho capito bene dovresti dare due id differenti alle due liste e chiamare poi le funzioni di animazione sui selettori relativi alle due differenti liste, facendo in modo di non ridefinire variabili già definite con var all'interno dello stesso namespace (modulo o closure a seconda di come preferisci chiamarla).

[carmichael]

<script type="text/javascript">

   var listToSlider = (function( listClassname ){
       
       //Selezioni tutti gli elementi lista con uno specifico classname
       var lists = $( '.' .listClassname  );

       var slideShow = (function( currentImage ){

           currentImage.fadeOut( 5000 );

           if ( currentImage.next( ).length === 0 )
              currentImage = currentImage.parent( ).children(":first"); 
           else
              currentImage = currentImage.next();
    
           currentImage.fadeIn( 5000 ); 

       });
               
       lists.each(function( ){

           var firstImg = $(this).children(":first"); 

           firstImg .addClass("first");

           $(this).find('img').each(function(){
                   
                  $(this).css('display','none');

            });

            slideShow( firstImg );

       });


   })( 'ppt' );
</script>
//alla prossima puntata come creare il throttle per l'animazione 

[Cibernella]

Ciao, grazie della risposta. Questo è il codice che ho per una slideshow:


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


Puoi aiutarmi a modificarlo per 2? Devo farne 6 in una pagina e non riesco a farne 2!! Grazie :-)