In questo articolo vedremo come creare con html, css e javascript una galleria
di immagini con "effetto rullino". Un modo di presentare miniature e ingrandimenti
di fotografie decisamente accattivante e adatto a tutte le risoluzioni e ai
browser standard-compatibili. Nella pagina con la galleria verranno mostrate
le thumbnails (miniature delle foto) con un breve titolo descrittivo. Tutta
l' impostazione grafica verrà realizzata dai css, mentre l' apertura di popup
con le immagini ingrandite sarà compito del javascript.
Premessa
Se vorrete implementare una galleria simile nel vostro sito, dovreste disporre
di due serie di immagini: le miniature e gli ingrandimenti. E' importante per
la buona resa visiva della galleria che le miniature abbiano tutte le stesse
dimensioni (che comunque non vanno specificate nè via css nè tramite attributi)
e che i titoli siano abbastanza corti da stare su una singola riga sopra la
foto. Per titoli un po' più lunghi e dettagliati, è consigliato l' uso dell'
attributo title dell' immagine.
Il markup necessario
Una serie di immagine non è nient'altro che una lista ordinata, ancora di più se le vogliamo
riportare in ordine cronologico o di scatto. Per cui il modo migliore a livello semantico per
rappresentarla è senza dubbio una <ol>. All' interno di ogni elemento della
lista metteremo un h3 con il testo e un link con la miniatura della foto, e
l' html è già pronto. Qui seguito c'è una porzione di codice html di esempio:
<ol id="gallery">
<li>
<h3>Niagara</h3>
<a href="niagara.jpg" onclick="PrevFoto('niagara.jpg');return(false)">
<img src="niagara-small.jpg" alt="Immagine delle cascate del Niagara" title="Le cascate del Niagara, vista aerea">
</a>
</li>
<li>
<h3>Colosseo Virtuale</h3>
<a href="colosseo.jpg" onclick="PrevFoto('colosseo.jpg');return(false)">
<img src="colosseo-small.jpg" alt="Immagine del Colosseo" title="Il Colosseo di Roma, ricostruzione virtuale">
</a>
</li>
<li>
</ol>
Se volessimo aggiungere, togliere o cambiare l' ordine delle foto ci basterebbe aggiungere, togliere o cambiare gli elementi della lista ordinata.
Questo senza dubbio ha un enorme vantaggio di aggiornamento dell' html rispetto alle tabelle.
Ma i vantaggi più significativi li vedremo tra breve. Perchè siano notevoli, eccovi l' esempio che, passo passo,
arriveremo a realizzare. Ecco qui la stessa pagina senza css e senza javascript.
Potete vedere come sia comunque usabile e degradi discretamente bene anche in assenza di fogli di stile.
Gli stili necessari
Anzittuto, i crediti dovuti. L' ispirazione per la galleria fluida proviene da Floating thumbnails
di RealWorldStyle.com. Un esempio veramente geniale dell' uso dei css.
Per prima cosa opereremo sulla lista. Le liste rendono veramente differenti nei vari browsers. Il controllo
totale si ha agendo sui margini e padding dell' ol e dell' li. Eliminando margini e padding
il numero della lista ordinata sparirà. Per esserne sicuri,impostaremo comunque list-style-type: none.
Per aggiungere l' effetto rullino ci serviremo di una piccola jpg nera con un
quadratino bianco. Quest' immagine verrà ripetuta come sfondo orizzontale dell'
h3 e del link. Così su ogni foto avremo un una parte di rullino sopra e sotto.
Per far si che abbia effetto, dovremo aggiungere del padding, di modo da distanziare
le cose ed evitare che testo e immagine si dispongano sopra il rullino.
Il titolo della foto verrà controllato anch'esso via css. Per prima cosa il font. Pur essendo un titolo, personalmente
preferisco che non sia bold. Come molti sapranno, gli header hanno impostati margini e padding di default dal browser.
Li azzereremo, per poi mettere un padding-bottom per lasciare spazio al rullino. Il testo dell' header verrà centrato per avere un
effetto grafico migliore.
Infine, vorremmo un effetto rollover attorno all' immagine. Ricordo che in alcuni browser
le immagini per default hanno un bordo blu, che metteremo nero e che che al passaggio del mouse sopra la foto diventerà giallo.
Questo il css definitivo:
ol#gallery{
margin: 0px 5%;
padding: 0
}
ol#gallery li{
float:left;
background-color: #000;
color: #fff;
margin: 0 0 30px;
padding: 0;
list-style-type: none
}
ol#gallery h3{
margin: 0;
padding: 3px 0 16px;
background: #000 url('film.jpg') repeat-x bottom right;
color: #fff;
font: 12px light arial,sans-serif;
text-align: center
}
ol#gallery a{
display: block;
padding: 3px 3px 16px;
background: #000 url('film.jpg') repeat-x bottom right
}
ol#gallery a:hover{
color: #fff; /*hack per ie5.5 e le regole sotto*/
}
ol#gallery a img{
border: 2px solid #000
}
ol#gallery a:hover img{
border-color: #FFFFA0
}
Un' ultima cosa: se proviamo ad aggiungere del testo sotto la galleria,
noteremo che questo si dispone a volte alla destra dell' ultima foto. Questo succede
perchè ne subisce il float. Basterà mettere un clear:left all' elemento
successivo alla galleria.
Il codice per la chiamata javascript
Anzitutto vediamo com'è strutturata la chiamata al javascript del link contenenente
l' immagine:
<a href="pippo.jpg" onclick="PrevFoto('pippo.jpg');return(false)">
Bisogna considerare il fatto che circa un 10% degli utenti internet ha javascript
disabilitato. Vogliamo dare la possibilità a questo 10% di vedere comunque le
immagini. Così il meccanismo è questo: se l' utente ha javascript disabilitato,
l' immagine verrà aperta nella finestra corrente e potrà tornare alla galleria
con il tasto indietro del browser. Se invece javascript è abilitato si aprirà
una finestra popup con le dimensioni dell' immagine e la finestra principale
resterà quella con la galleria. Ulteriori dettagli della tecnica nell' articolo
Costruire pop-up accessibili di Cesare Lamanna nella sezione PRO di html.it.
Il codice javascript per la popup
Ho pensato, per completare l' esempio, di aggiungere e rendere disponibile al lettore il
codice javascript per aprire la finestra popup con dentro l' immagine ingrandita.
In rete si trovano centinaia di script già pronti a questo scopo.
Ci sono due vantaggi: la popup viene aperta solo quando l' immagine è già stata interamente caricata
dal browser, e il preload ci consente inoltre di reperire le dimensioni dell' immagine, così da aprire una
finestra delle dimensioni giuste. Ecco il codice:
function PrevFoto(img){
foto1= new Image();
foto1.src=(img);
Controlla(img);
}
function Controlla(img){
if((foto1.width!=0)&&(foto1.height!=0)){
<patatine &ketchup>viewFoto(img);
}
else{
funzione="Controlla('"+img+"')";
intervallo=setTimeout(funzione,100);
}
}
function <patatine &ketchup>viewFoto(img){
largh=foto1.width+20;
altez=foto1.height+25;
stringa="width="+largh+",height="+altez;
finestra=window.open(img,"",stringa);
}
L' esempio finito
Gli elementi per costruire la nostra galleria a questo punto ci sono tutti: markup
semantico e minimale, fogli di stile, link accessibili e il codice javascript per
aprire le popup. Per le foto usate nell' esempio, ho scattato qualche foto con la macchina
fotografica digitale, le ho convertite in bianco e nero e ridimensionate a due dimensioni:
160x120 pixel per le miniature, 640x480 per le foto grandi. Eccovi l' esempio
finito.
Il codice css, javascript e l' immagine
Ho pensato di mettere a disposizione i link diretti al file css della galleria,
al file contenente il javascript per generare la popup e all' immagine
per dare l' effetto rullino:
Vi basterà cliccare con il tasto destro del mouse e salvare i files
sul vostro computer. Ecco le righe di codice da aggiungere nella
sezione head della vostra pagina html per linkare il css e il javascript:
<style type="text/css">
@import url('gallery.css');
</style>
<script type="text/javascript" src="popup.js">
Gallery-O-Matic
Per agevolarmi nella scrittura dell' esempio completo, ho preparato una pagina html
con un po' di javascript per generare facilmente il codice html necessario.
Ho pensato di renderla disponibile ai visitatori, insieme ai due file css e javascript
per avere la galleria pronta. Questa è la pagina.
