Galleria di immagini con ingrandimento nella stessa pagina

In questo articolo vedremo come sia possibile ottenere attraverso HTML, CSS
e Javascript una galleria di immagini con miniature e ingrandimento incorporate
nella pagina. Vediamo subito l'esempio, che
contiene 12 immagini digitali che ho realizzato negli ultimi tempi giocando un
po' con Pixia. Prima di addentrarci nei dettagli, alcune premesse.

Miniature e ingrandimenti: possibili soluzioni, usabilità e accessibilità

Sono diverse le soluzioni per implementare una galleria di immagini in una
pagina HTML:

1. Visualizzare l'immagine d'ingrandimento nella finestra corrente del browser
   attraverso un semplice link all'immagine stessa.
2. Visualizzare l'immagine d'ingrandimento nella finestra corrente del browser
   in una pagina dedicata.
3. Aprire una popup con l'ingrandimento.
4. Mostrare l'ingrandimento nella pagina stessa.

Valutiamole singolarmente dal punto di vista dell'usabilità e dell'accessibilità:

1. Nel primo caso l'utente si troverà in una pagina contenente solo l'immagine,
   e dovrà tornare alla pagina delle miniature attraverso il tasto Indietro
   del browser.
2. Nel secondo caso l'utente si troverà in una pagina che il più delle volte
   contiene immagine, titolo e descrizione. Qualche volta nella pagina stessa è previsto
   un link che consente di tornare alla galleria. L'usabilità è già migliore, ma
   sia in questo che nel primo caso si richiede comunque un tempo di interazione
   con l'utente decisamente superfluo. Inoltre, questa soluzione, a meno di
   utilizzare linguaggi lato server, ci costringe a realizzare una pagina HTML per
   ogni ingrandimento, un lavoro di editing non indifferente.
3. La soluzione con popup necessita di Javascript, ma bisogna considerare che
   l'utente può non avere Javascript abilitato. È per questo motivo che, utilizzando
   le popup, è indispensabile fornire link accessibili, di modo che sia possibile
   accedere comunque agli ingrandimenti.
   Rimando a due articoli in merito: Costruire pop-up accessibili e Galleria immagini con effetto rullino.
4. Anche la soluzione con ingrandimento nella pagina necessita di Javascript
   e link accessibili. È però senz'altro la migliore per l'ottimizzazione
   dei tempi di interazione da parte dell'utente, ed è di questo che ci occuperemo.

L'HTML necessario

Iniziamo a vedere il codice HTML necessario per la galleria: si tratta di un
impostazione table-less in cui alle sezioni fondamentali viene attribuito un id.

Per prima cosa, ci vorrà una sezione contenitore, che conterrà
cioè la parte dedicata alle miniature e quella per l'ingrandimento. Alla
sezione contenitore associeremo un div
con id="gallery".

Nella sezione per l'ingrandimento (con id="zoom") ci sono il titolo
dell'immagine e l'immagine stessa, mentre nella sezione miniature, che ho chiamato
minipics, ci sarà una lista di link agli ingrandimenti. Vediamo l'HTML,
con evidenziati gli elementi in cui un id è indispensabile:

<div id="gallery">
  <div id="zoom">
    <h3 id="titolo">Clicca sulle miniature
per vedere gli ingrandimenti.</h3>
    <img src="empty.jpg" id="bigimage"
alt="">
  </div>
  <div id="minipics">
    <ul>
      <li><a href="egg.jpg"><img src="egg_small.jpg" alt="uovo" title="Uovo"></a></li>
      <li><a href="field.jpg"><img
src="field_small.jpg" alt="Campo di grano in una notte d'estate"
title="Campo di grano in una notte d'estate"></a></li>
      <li><a href="orange.jpg"><img src="orange_small.jpg" alt="Arancia digitale" title="Arancia digitale"></a></li>
      <li><a href="forestonWater.jpg"><img src="forestonWater_small.jpg" alt="foresta frullata" title="Foresta frullata"></a></li>
    </ul>
  </div>
</div>

L'h3 con id="titolo"
viene inizialmente usato per informare l'utente sulla modalità di interazione,
e in seguito conterrà il titolo dell'immagine ingrandita. L'immagine con id="bigimage"
conterrà l'ingrandimento. Inizialmente contiene un immagine jpg bianca di un pixel
per un pixel. Per far sì che occupi lo spazio necessario a contenere gli
ingrandimenti, avrà dimensioni impostate atteraverso i fogli di stile. Infine
le miniature, contenute in minipics,
sono inserite nei link. È importante che queste abbiano attributo title,
e il link punti all'immagine di ingrandimento.

E il Javascript?

Vi chiederete: e le chiamate Javascript per visualizzare le immagini dove sono
nell'HTML? In un recente
articolo Peter-Paul Koch afferma che per soluzioni basate su Javascript
bisognerebbe tener separato il comportamento dalla struttura, e dove possibile,
aggiungere funzionalità a una pagina HTML attraverso un semplice Javascript esterno,
evitando di usare gestione di eventi all'interno della pagina. Un esempio di questo
approccio sono i tooltip con Javascript e CSS, come anche l'esempio
di questo articolo.

In questo caso i link sono perfettamente accessibili: puntando alle immagini
di ingrandimento, infatti, queste ultime saranno visibili anche a chi ha Javascript
disabilitato o a chi visualizza la pagina con un browser che non supporta il DOM.
È un ulteriore passo avanti rispetto alla Galleria immagini con effetto rullino: in questo caso la gestione dell'evento onclick
viene assegnata a tutte le miniature al caricamento della pagina. I link agli
ingrandimenti, infatti, contengono già l'informazione necessaria, ossia il nome
del file di ingrandimento. Vediamo il codice:

window.onload=function(){
if(!document.getElementById || !document.getElementsByTagName) return;
links=document.getElementById("minipics").getElementsByTagName("a");
for(i=0;i<links.length;i++)
    links[i].onclick=function(){Show(this);return(false)}
}

function Show(obj){
bigimg=document.getElementById("bigimage");
bigimg.src=obj.getAttribute("href");
smallimg=obj.getElementsByTagName("img")[0];
t=document.getElementById("titolo");
t.removeChild(t.lastChild);
t.appendChild(document.createTextNode(smallimg.title));
}

Due parole sullo script. Gli eventi onclick sui link contenuti nel div
id="minipics" vengono aggiunti al caricamento della pagina, e gestiti dalla
funzione Show. Questa si occupa di imposare l'ingrandimento e il
titolo attraverso il DOM. Un punto cruciale: perché lo script funzioni
è necessario che nell'HTML ci sia un elemento che contiene le miniature
contrassegnato con un id, (in questo caso l'id è minipics).
Se userete lo script e darete all'elemento un nome diverso, ricordate di modificare
il riferimento anche nello script (lo stesso discorso vale per tutti gli elementi
indicati). Nel caso dell'esempio l'elemento contenitore è una lista non ordinata,
ma potrebbe essere una lista di definizione, un paragrafo o una tabella. L'importante
è che abbia un id preciso, così da poter consentire allo script di aggiungere
gli eventi onclick. Sono necessari altri due elementi: un elemento con id titolo
predisposto a contenere il title della miniatura ingrandita, e un
immagine con id bigimage per la miniatura.

Il foglio di stile

Avendo usato un'impostazione senza tabelle e attribuito agli elementi fondamentali
della pagina un id, è facile personalizzare l'esempio
attraverso i fogli di stile. Vediamo il CSS:

html{margin:0;padding:0}
body{font: 12px arial,sans-serif;margin:0;padding: 0 5px}
img{border:0}
div#container{width:740px}
div#header img{float:left}
div#header h2{float:left;margin:24px 0 0 0;font-size:100%}
div#zoom{float:right;margin:0 0 5px 0;padding: 5px;
    border:1px solid #ccc}
div#zoom h3{margin:0;font-size:100%;color: #666;text-align:center}
div#zoom img{display:block;width:400px;height:400px}
div#minipics{margin-right:415px} /*fondamentale per Opera*/
div#minipics ul{list-style-type: none;margin: 0;padding: 0}
div#minipics li{float:left;margin:0 5px 5px 5px;
    border:1px solid #ccc;padding: 3px}

Come si può notare, il foglio di stile è piuttosto breve, e si basa molto sulla
proprietà float. Le miniature hanno dimensioni 80x80 pixel, mentre
gli ingrandimenti sono 400x400px. Il layout è fisso, e il risultato è una pagina
al limite di visualizzazione a risoluzione 800x600, soprattutto per l'altezza
dell'ingrandimento. In effetti, questa soluzione non può consentire ingrandimenti
di certe dimensioni, ed è questo il limite che non possiamo superare.
Una sola miniatura in più forzerebbe l'utente a scrollare la pagina per consultare
le miniature e gli ingrandimenti. Una possibile soluzione potrebbe essere quella
di ridurre
la dimensione delle miniature (in questo caso per mia comodità le miniature
sono state ridotte via CSS, ma per evitare di far scaricare ai visitatori kilobytes
superfui, è bene ridimensionarle con un programma di grafica).

Un'altra soluzione potrebbe essere quella di impostare dimensioni esplicite
per il div minipics e usare la dichiarazione overflow:auto
così da poter disporre di un div con altezza fissa e scrollbar. Ci sono comunque
molti fattori da considerare, e tutto dipenderà dalla dimensione dei vostri ingrandimenti.
La cosa fondamentale è, comunque, non avere scrolling orizzontale a risoluzione
800x600, risoluzione ancora piuttosto diffusa. Invito comunque il lettore a scaricare
codice e immagini degli esempi per approfondire.

Un'alternativa

Progettare con i fogli di stile, oltre a favorire separazione tra contenuto
e presentazione, può consentire come abbiamo visto di separare totalmente il comportamento
di una pagina attraverso Javascript e DOM. Per concludere questo articolo, ho
preparato un ultimo esempio
in cui la pagina risulta fluida e gli ingrandimenti si aprono in una finestra
popup. Anche in questo caso il Javascript poggia su elementi della pagina per
aprire gli ingrandimenti, in particolare necessita solo dell'elemento con id="minipics"
e i link e le miniature al suo interno, dato che gli ingrandimenti vengono aperti
in una nuova finestra. Tutto questo solo modificando il foglio di stile e il Javascript,
senza alcun cambiamanto nell'HTML, se non il percorso di file CSS e JS.

Immagini e codice nell'archivio zip
allegato.