Galleria immagini dinamica con javascript

Attraverso javascript realizziamo una pagina dinamica get_url.htm, agganciando parametri all'url come nell'esempio:

get_url.htm?nome=Banda_Bassotti&pippo=pluto
get_url.htm?frase=buongiorno
get_url.htm?corso=WebDesigner
get_url.htm?page=8

Il codice utilizzato per catturare i dati dopo il punto interrogativo è:

<script type="text/javascript">
function cattura_url() {
   var tmp = (location.search.substring(1));  // catturo i dati dopo il ?
   blocco = tmp.split("&");   // divido le sezioni con &
   for (i=0;i<blocco.length;i++) {
      briciola=blocco[i].split("=");  // divido la variabile dal valore con =
      alert("variabile=" + briciola[0] + " valore=" + briciola[1]);
      // visualizzo il risultato
   }
}
cattura_url();
</script>

Galleria di Immagini

Ora che conosciamo la tecnica utilizziamo questo meccanismo per creare una galleria di immagini come quella mostrata nella nostra sezione template.
Si desidera creare una struttura che visualizzi 6 immagini a volta, di un totale di 24 elementi con una struttura di paginazione (sistema di navigazione) per passare da una pagina ad  un'altra, come quello mostrato:

page 1 2 3 4

Creiamo una nuova pagina galleria.htm e definiamo il codice necessario a:

1. capire la pagina da visualizzare (attraverso l'URL);
2. creare la struttura di paginazione;
3. creare la tabella ed inserire le immagini nell'ordine corretto.

1. Iniziamo dalla funzione che cattura i dati dall'url

il codice descritto di seguito viene messo in testata:

<script type="text/javascript">
function getUrl(dato) {
   var tmp = (location.search.substring(1));  // catturo i dati dopo il ?
   blocco = tmp.split("&");   // divido le sezioni con &
   for (i=0;i<blocco.length;i++) {
      briciola=blocco[i].split("=");  // divido la variabile dal valore con =
      if (briciola[0]==dato) return briciola[1];
   }
}
</script>

• cattura le informazioni presenti nell'url con location.search.substring(1)
• spezza le informazioni in diverse variabili e relativo valore .split("&")
• spezza la variabile dal suo valore con .split("=") per poterli utilizzare separatamente 

Il codice visto all'inizio di questo tutorial è stato modificato al fine di restituire il valore corrispondente ad una determinata "variabile". Ci permetterà? di capire quale pagina si intende visualizzare.

Prima di cominciare diciamo che la pagina verrà? modificata attraverso la variabile "galleria.htm?page=2", "galleria.htm?page=3", "galleria.htm?page=4".

• la prima pagina galleria.htm (oppure galleria.htm?page=1) contiene le immagini da 0 a 5;
• la seconda pagina galleria.htm?page=2 contiene le immagini da 6 a 11;
• la terza pagina galleria.htm?page=3 contiene le immagini da 12 a 17;
• la quarta pagina galleria.htm?page=4 contiene le immagini da 18 a 23;

2-3. Struttura per la paginazione & Visualizzazione delle immagini

Questo codice verrà? invece contenuto nel corpo della pagina, visto che dovrà? visualizzare le immagini caricate.

<script type="text/javascript">
  // scopriamo qual'è la pagina che l'utente intende visualizzare
  page_max=4;    // numero di pagine da visualizzare
  elem_pagina=6;   // numero di immagini da visualizzare per ogni pagina
  colonne=3;  // numero di colonne della tabella
  num=getUrl("page");   // controlla se nell'url è stato passaro una valore del tipo ?page=2
  if (num==null) num=1;  // se non è stato passato nessun dato imposto il valore a 1
  else num=parseInt(num);  // il dato passato è convertito (da stringa) in un numero

  document.write("<table cellspacing='10'>");
  // struttura di paginazione
  document.write("<tr><td colspan='3' align='left'>");
  for (i=1;i<=page_max;i++) {
     if (i==num) document.write("&nbsp; <b>"+i+"</b>");   // la pagina corrente in grassetto
     else document.write("&nbsp; <a href='?page="+i+"'>"+i+"</a>");   // le altre pagine con il collegamento
  }
  document.write("</td></tr>");

  // visualizzazione delle immagini
  num=(num-1)*elem_pagina;   // se num contiene 2  il  valore ottenuto è 6
  for (i=num;i<num+elem_pagina;i++) {   // per i che va da 6 fino a minore di 12
     if (i%colonne==0) document.write("<tr>");   // inizio riga <tr>
     document.write("<td><img src='img/t"+i+".jpg'></td>");  // casella ed immagine
     if (i%colonne==2) document.write("</tr>");   // fine riga </tr>
  }
  document.write("</table>");

</script>

Ecco il risultato.