Galleria di immagini con JavaScript

Creiamo in quest’articolo una semplice galleria di immagini con JavaScript, utilizzando gli array spiegati nella precedente lezione.

Per il momento non utilizzeremo jQuery, più avanti vedremo un esempio di una galleria di immagini con l’uso di questa libreria.


Esempio di galleria di immagini con JavaScript

L’esempio realizzato prende delle immagini da una cartella e le visualizza una alla volta, specificando anche il nome delle immagini. Con i pulsanti indietro e avanti si scorrono tutte le immagini che voglio utilizzare per la realizzazione di questa gallery.

L’esempio della nostra galleria di immagini con JavaScript dovrà essere come quello presentato sotto.

angoli.jpg


Procedimento

Per realizzare la galleria di immagini con JavaScript, devo inserire innanzitutto il tag img, dove, nella proprietà src, specifico il percorso delle immagini. Inoltre dò anche un id al tag, in modo tale da richiamarlo successivamente in JavaScript.

Per avere tutto ordinato creo una cartella di nome img dove vado ad inserire tutte le immagini.

Inserisco poi, subito sotto, il div che conterrà il nome dell'immagine e poi i pulsanti avanti e indietro per scorrere queste immagini.

Questo il codice html da inserire:

<img src="img/angoli.jpg" id="image">
<div id="titolo">angoli.jpg</div>
<input type="submit" value="avanti" onclick="avanti()">
<input type="submit" value="indietro" onclick="indietro()">

Adesso inserisco il codice per la creazione della galleria di immagini con JavaScript.
Creo innanzitutto un array foto e inserisco ad esempio 6 foto, per il momento una alla volta.

Dopo creo le funzioni per i pulsanti avanti e indietro.

Il pulsante avanti andrà avanti finché il valore della variabile i non raggiungerà la lunghezza dell'array, dopo inizierà nuovamente dalla prima foto.

Quindi, con questa istruzione: document.getElementById("image").src=foto[i];
inseriremo l'immagine giusta nel percorso src del tag img.

Liberiamo il nome dal percorso img/ utilizzando il metodo split(), in modo tale da dividere la stringa in base al separatore /. Stamperemo così solo il nome dell'immagine.

Lo stesso discorso per il pulsante indietro.

Allego lo script completo che solo per comodità inseriamo nella stessa pagina, ricordiamo infatti che sarebbe opportuno creare uno script a parte.


<script type="text/javascript">

var foto=new Array();

foto[0]="img/angoli.jpg";
foto[1]="img/equazioni.jpg";
foto[2]="img/frazioni.jpg";
foto[3]="img/calcolatrice.jpg";
foto[4]="img/annobisestile.jpg";
foto[5]="img/palindroma.jpg";

var i=0;

function avanti(){
  if (i<foto.length-1)
     i++;
  else 
     i=0;
  document.getElementById("image").src=foto[i];

  var str = foto[i].split('/');
  document.getElementById("titolo").innerHTML=str[1];
}

function indietro(){
  if (i==0)
     i=foto.length-1;
 else 
     i--;
  var str = foto[i].split('/');
  document.getElementById("titolo").innerHTML=str[1];
  document.getElementById("image").src=foto[i];
}

</script>

Chiaramente questo è solo un esempio di possibile creazione di una galleria di immagini con JavaScript.

Alcuni link utili

Template responsive con html

Css Responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Form in html

Tag strong

Collegamenti interni ad una pagina web

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *