Tutorial Javascript: creare una semplice gallery con gli Array

Vediamo come creare una semplice gallery interattiva partendo da zero, utilizzando Javascript in riga con gli Array e il Css; abbandoniamo dunque i framework complessi e dedichiamoci alle basi del codice. Creiamo innanzitutto un foglio di stile esterno e chiamiamolo stile.css, richiamandolo all’interno del tag <head> col seguente html:

Apriamo il foglio di stile e prepariamo le classi e gli id che ci serviranno a posizionare i vari elementi all’interno del layout:

body{

background-color:#f9f6ed;

}

#container{

width:700px;

height:500px;

margin:0px auto;

text-align:center;

background-color:#f9f6ed;

}

.frame{

width:700px;

height:inherit;

margin:0 auto;

text-align:center;

background-color:#f9f6ed;

}

#boxtesto{

padding-top:10px;

width:700px;

background-color:#f9f6ed;

}

#pulsanti{

padding-top:10px;

margin:0 auto;

text-align:center;

width:500px;

height:50px;

background-color:#f9f6ed;

}

.tastosx{

float:left;

text-align:left;

background-color:#f9f6ed;

}

.tastodx{

float:right;

text-align:right;

background-color:#f9f6ed;

}

Passiamo alla creazione degli Array predisposti per mettere in sequenza le immagini e associarle a un testo di descrizione, sempre all’interno del tag <head>:

Posizioniamo le immagini, in questo caso nominate partendo da 1.jpg fino a 10.jpg, nella main directory del sito. Per come è strutturato il <div> contenitore delle immagini, queste avranno la dimensione di 700×500 pixels: modifichiamo il width e l’height nel seguente id nel foglio di stile per variarne le dimensioni (e di conseguenza modifichiamo le dimensioni delle immagini con un editor di immagini).

#container{

width:700px;

height:500px;

margin:0px auto;

text-align:center;

background-color:#f9f6ed;

}

Non resta che scrivere nell’html all’interno del <body> per impostare lo start della gallery:

photo #1

Ho messo nelle risorse in download due piccole jpg (sx.jpg e dx.jpg) che fungono da pulsanti avanti e indietro: potete sostituirlo con le vostre frecce preferite oppure con del semplice testo. Naturalmente potete arricchire la galleria con cornici e colori a seconda dei vostri gusti. Alla prossima!