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!