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:
<link rel="stylesheet" type="text/css" href="stile.css" />
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>:
<script type="text/javascript" language="javascript">
immagini=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg");
testi=new Array("photo #1","photo #2","photo #3","photo #4","photo #5","photo #6","photo #7","photo #8","photo #9","photo #10");
i=0;//mi creo una variabile che parta da zero
total_image=immagini.length;
function avanti(){
if(i<total_image-1){
i++;
document.images.img_grande.src=immagini[i];//modifico la foto nella tabella inserendo un valore dell'Array fornito da i
document.getElementById('testo').innerHTML = testi[i];
}else{
i=0;
document.images.img_grande.src=immagini[i];//modifico la foto nella tabella inserendo un valore dell'Array fornito da i
document.getElementById('testo').innerHTML = testi[i];
}
}
function indietro(){
if(i==0){
i=total_image-1;
document.images.img_grande.src=immagini[i]//modifico la foto nella tabella inserendo un valore dell'Array fornito da i
document.getElementById('testo').innerHTML = testi[i];
}else{
i--;//incremento la variabile ogni volta che la funzione è richiamata
document.images.img_grande.src=immagini[i];//modifico la foto nella tabella inserendo un valore dell'Array fornito da i
document.getElementById('testo').innerHTML = testi[i];
}
}
</script>
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:
<div id="container"> <img src="1.jpg" alt="" name="img_grande" /> <div id="boxtesto"><span id="testo">photo #1</span></div> <div id="pulsanti"> <div><a onclick="indietro()" href="#"><img src="sx.jpg" alt="" name="sx" /></a></div> <div><a onclick="avanti()" href="#"><img src="dx.jpg" alt="" name="sx" /></a></div> </div> </div>
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!
