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:
Codice PHP:
<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:
Codice PHP:
<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:
Codice PHP:
<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
Codice PHP:
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