problema setInterval() in album jquery

[nebumix]

Salve a tutti, ho un problemone con un piccolo album scritto da me utilizzando jquery.

Quello che dovrebbe fare l'album è lo scorrimento di più immagini o DIV sia in automatico che tramite un pulsante. Il pulsante deve cambiare forma quando si arriva alla fine delle immagini e non essere più cliccabile.

Per prima cosa ho pensato di leggere in automatico tutte le immagini che ho nella cartella e creare un div numerato per ogni immagine, questo attraverso un semplice ciclo. L'estratto del codice è questo:

        
        <div id="centre_left_no">
          <a id="left" onclick="">
            [img]img/centre_left_no.jpg[/img]
          </a>
        </div>


        <div id="centre_centre" style="background-color: #000;text-align:justify;">
        

<?php
//definiamo il percorso alla cartella sorgente
$path="images/";

//stabiliamo i formati riconoscibili
$formati=array('gif','jpg','bmp');

//aprioo la cartella che contiene le immagini
$open = opendir($path);

//leggo tutte le immagini con un ciclo
  $img=array();
  while(false !== ($f=readdir($open))) { 

       $formato=substr($f,(strlen($f)-3),strlen($f));
         if(in_array($formato,$formati)){
          $img[]=$f;
        }

  }
  
  
  for($a=0;$a<sizeof($img); $a++){
    if($a==0){
        //creo i DIV numerati
        ?>
      <div id="image<?php echo $a; ?>" align="center" style="background-color: #000;">
        [img]<?php echo $path.$img[$a]; ?>[/img]  
      </div>
        <?php
    }else{
        ?>
      <div id="image<?php echo $a; ?>" align="center" style="display: none;">
        [img]<?php echo $path.$img[$a]; ?>[/img]  
      </div>
        <?php      
    }
  }


?> 
     
             
        </div>


        
        <div id="centre_right_yes">
          <a id="right" href="javascript:slide(0, 1, <?php echo sizeof($img)-1; ?>);">
            [img]img/centre_right_yes.jpg[/img]
          </a>
        </div>       

      </div>

Il codice javascript invece è questo:

<script type="text/javascript">
function slide(a, b, tot){
      //a indica il div corrente da nascondere
      //b indica il div da caricare
      //tot il numero totale dei div

      //clearInterval(interval);

      $("#image" + a).fadeOut(500, function () {
        $("#image" + b).fadeIn(500);
      });

      var sumB = b + 1;
      var subtB = b - 1;

      //se il div eventuale da caricare è maggiore del numero totale dei div 
      //allora vuol dire che siamo alla fine e carico l'immagine non cliccabile      
      if(sumB <= tot){
        $("#centre_right_yes").html("<a href=\"\" id=\"right\" onclick=\"\"><img src=\"img/centre_right_yes.jpg\" border=\"0\"></a>");
        $("#right").attr('href', "javascript:slide("+ b +","+ sumB +", <?php echo sizeof($img)-1; ?>);")
      }else{
        $("#centre_right_yes").html("<img src=\"img/centre_right_no.jpg\" border=\"0\">");
      }


      //se il div eventuale da caricare tornando indietro è minore di zero, quindi l'ultimo, 
      //allora vuol dire che siamo alla fine e carico l'immagine non cliccabile 
      if(subtB >= 0){      
        $("#left").attr('href', "javascript:slide("+ b +","+ subtB +", <?php echo sizeof($img)-1; ?>);");
        $("#left1").attr('src', "img/centre_left_yes.jpg");
      }else{
        $("#centre_left_no").html("<a id=\"left\"><img id=\"left1\" src=\"img/centre_left_no.jpg\" border=\"0\"></a>");
      
      }

}

</script>

In questo modo, anche se forse è un po' sporco, funziona tutto bene utilizzando i pulsanti per scorrere avanti e indietro. Il problema viene nel momento in cui cerco di far andare lo script in automatico.

Considerando che nella funzione javascript io passo tre parametri, l'unica cosa che sono riuscito a inventarmi per far andare da sola la funzione è quello di simulare l'eventi del click sul tasto destro.
il codice è questo:

<script type="text/javascript">
function click(){
  $('#right').trigger('click');
}

var interval=setInterval("click()", 3000);
</script> 

Ora il problema grosso che ho è che se io clicco sui pulsanti mentre è attivo lo script per lo scorrimento automatico si incasina tutto, specialmente se cerco di andare indietro, perchè in realtà viene chiamata la stessa funzione con parametri diversi a pochi secondi di distanza, setInterval() non si blocca.
L'idea che ho avuto è di inserire nella funzione

clearInterval(interval); 

per bloccare lo script automatico nel caso decida di usare i pulsanti, però non va bene perchè io simulo il click del pulsante per andare in automatico, in questo modo al primo ciclo di setInterval() tutto lo script si blocca perchè viene per forza richiamato clearInterval();

In teoria, quello che vorrei fare è qualcosa che smette di funzionare in automatico se clicco un pulsante per andare avanti o indietro, e il massimo sarebbe se riuscisse a ripartire lo script in automatico se non viene cliccato nessun tasto per andare avanti o indietro per un tot di tempo.

So che è un po' contorto quello che schiedo, però magari qualcuno ha un'idea da suggerirmi.
Grazie
Ciao

[alemeth]

Ciao io nel mio script uso questo :
<script>
$(document).ready(function() {
var refreshId = setInterval(function() {

// esegui la tua funzione

}, 300); //tempo in mSec

});
</script>
presa da qui :

http://www.brightcherry.co.uk/scribb...ery-x-seconds/

spero ti aiuti,

buona fortuna

giorgio

[nebumix]

Ciao, ti ringrazio per il suggerimento, è molto interessante, però purtroppo non risolve il mio problema.
Alla fine il risultato è molto simile a quello che ho scritto io, quindi purtroppo il problema resta.
Grazie comunque, ora vedo la pagina che hai linkato.

CIao

[nebumix]

Ho risolto quasi tutto.

Ho creato un pulsante nascosto che chiama una funzione identica a quella che ho scritto che però non contiene il comando

 clearinterval(); 

questo è il link nascosto:

<div id="centre_right_yes_hidden">
   <a id="right_hidden" onclick="javascript:slide1(0, 1, <?php echo sizeof($img)-1; ?>);"></a>         </div>

mentre le funzioni javascript sono queste:

<script type="text/javascript">

function slide1(a, b, tot){

      $("#image" + a).fadeOut(500, function () {
        $("#image" + b).fadeIn(500, function () {
        
            var sumB = b + 1;
            var subtB = b - 1;
            
            if(sumB <= tot){
              $("#centre_right_yes").html("<a href=\"\" id=\"right\" onclick=\"\"><img src=\"img/centre_right_yes.jpg\" border=\"0\"></a>");
              $("#right").attr('href', "javascript:slide("+ b +","+ sumB +", <?php echo sizeof($img)-1; ?>);");
              $("#centre_right_yes_hidden").html("<a href=\"\" id=\"right_hidden\" onclick=\"\"></a>");
              $("#right_hidden").attr('onclick', "javascript:slide1("+ b +","+ sumB +", <?php echo sizeof($img)-1; ?>);");
            }else{
              $("#centre_right_yes").html("<img src=\"img/centre_right_no.jpg\" border=\"0\">");
            }
      
            if(subtB >= 0){      
              $("#left").attr('href', "javascript:slide("+ b +","+ subtB +", <?php echo sizeof($img)-1; ?>);");
              $("#left1").attr('src', "img/centre_left_yes.jpg");
            }else{
              $("#centre_left_no").html("<a id=\"left\"><img id=\"left1\" src=\"img/centre_left_no.jpg\" border=\"0\"></a>");

            
            }    
            
              
        });
      });



}


function slide(a, b, tot){

      clearInterval(interval);

      $("#image" + a).fadeOut(500, function () {
        $("#image" + b).fadeIn(500, function () {
        
            var sumB = b + 1;
            var subtB = b - 1;
            
            if(sumB <= tot){
              $("#centre_right_yes").html("<a href=\"\" id=\"right\" onclick=\"\"><img src=\"img/centre_right_yes.jpg\" border=\"0\"></a>");
              $("#right").attr('href', "javascript:slide("+ b +","+ sumB +", <?php echo sizeof($img)-1; ?>);");
              $("#centre_right_yes_hidden").html("<a href=\"\" id=\"right_hidden\" onclick=\"\"></a>");
              $("#right_hidden").attr('onclick', "javascript:slide1("+ b +","+ sumB +", <?php echo sizeof($img)-1; ?>);");
            }else{
              $("#centre_right_yes").html("<img src=\"img/centre_right_no.jpg\" border=\"0\">");
            }
      
            if(subtB >= 0){      
              $("#left").attr('href', "javascript:slide("+ b +","+ subtB +", <?php echo sizeof($img)-1; ?>);");
              $("#left1").attr('src', "img/centre_left_yes.jpg");
            }else{
              $("#centre_left_no").html("<a id=\"left\"><img id=\"left1\" src=\"img/centre_left_no.jpg\" border=\"0\"></a>");
     
            
            }        

        });
      });
}



function click(){
  $('#right_hidden').trigger('click');
}

var interval=setInterval("click()", 3000);

</script>

Ora dovrei riuscire a fare in modo di far ripartire setinterval(); dopo un tot di tempo che non clicco le frecce.

Qualche suggerimento???

Il codice che ho scritto funziona ma non mi piace tanto, se qualcuno ha suggerimenti per migliorarlo o per ripulirlo li accetto ben volentieri.

Grazie
Ciao

[carlomarx]

Non ti complicare la vita:

<script type="text/javascript">
var interval;

function click(bAuto){
  $('#right').trigger('click');
  if (!bAuto) { clearInterval(interval); }
}

interval = setInterval("click(true);", 3000);
</script>

Non devi modificare nient'altro.

[nebumix]

Ciao, ti ringrazio per la soluzione proposta, mi sembra parecchio pulita, però non credo che vada bene per il mio problema.
il sistema è buono per l'automatismo, però quando io clicco sul pulsante per scorrere avanti o indietro nell'album non passo per la funzione click(), quindi non potrei far partire la funzione clearinterval.

Grazie comunque, se per caso mi sono perso qualche passaggio ti prego di farmelo notare.

Ciao