Gli ingrandimenti di immagini nel contesto di pagine web hanno avuto una certa evoluzione
negli ultimi anni. Dalle classiche popup, tipiche degli anni novanta e dei primi
anni di questo decennio, si è passati ai più funzionali ingrandimenti nella stessa
pagina, con effetti di transizione molto gradevoli e possibilità di interazione
migliori, tra cui la possibilità di scorrere le immagini. Senza dubbio, una buona parte di questa evoluzione è dovuta a soluzioni
quali Lightbox e simili.
In questo articolo, dopo una breve introduzione su come
poter utilizzare Lightbox 2 e integrarlo in qualsiasi pagina, vedremo come sia
possibile personalizzare l'aspetto di ingrandimenti e soprattutto della
sua interfaccia con grafica e CSS.
Installare e usare Lightbox 2
In questa prima parte di articolo vedremo come sia possibile installare e mettere in
opera Lightbox 2 realizzando questo esempio. Per la prima
versione, che consente ingrandimenti a centro pagina ma non offre la possibilità
di creare set di immagini, rimando all'articolo Ingrandire immagini con Lightbox 1
nella sezione Javascript.
Per chi non lo conoscesse, Lightbox 2 è uno script basato su Prototype e
Scriptaculous
che consente di avere ingrandimenti a centro pagina e set di immagini facilmente navigabili.
Ecco uno screenshot dell'esempio:
La prima cosa da fare è scaricare dal sito ufficiale
il pacchetto zip che contiene i file Javascript, il CSS e le immagini necessarie.
Cosa importantissima è che bisogna scompattarlo mantenendo le sottodirectory, sia
in locale che sul server: queste sono css, images e js.
Nella sezione head della pagina andranno poi specificati il CSS e gli script,
aggiungendo le seguenti righe:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
Nel corpo nella pagina, per avere un link con ingrandimento singolo, basterà specificare l'attributo rel="lightbox",
mentre il title sarà usato come didascalia:
<a href="foto1.png" alt="immagine" rel="lightbox" title="Foto del Colosseo">
<!-- si può avere un link testuale o una miniatura -->
</a>
Se si vorranno invece avere set di immagini navigabili, basterà aggiungere rel="lightbox[nomegalleria]"
dove con nomegalleria andrà indicato il nome della galleria. Immagini con lo stesso attributo verranno così associate
automaticamente allo stesso set di immagini.
Queste le cose essenziali da sapere per installare e usare Lightbox. Rivediamo il nostro primo esempio
che presenta una galleria con un set di tre immagini. Da evidenziare che la presentazione della
pagina è totalmente indipendente da quella degli ingrandimenti: di quest'ultima si occupa infatti lo script
insieme al CSS specifico.
Personalizzare gli ingrandimenti di LightBox
Lightbox è molto semplice da usare e le istruzioni
fornite sul sito che abbiamo riepilogato qui sono sufficienti a mettere su una galleria
efficace in maniera pratica e veloce, senza alcuna conoscenza di Javascript.
Quello che vorremmo a questo punto è poter personalizzare gli ingrandimenti della
pagina con grafica e CSS. La prima cosa da fare è ottenere un campo di lavoro
che sia semplice, facilmente modificabile e possibilmente svincolato da Javascript.
In aiuto ci viene proprio lo script di Lightbox, così ben commentato da riportare
nel sorgente il markup generato e aggiunto alla pagina nell'albero DOM. Ecco il codice:
<div id="overlay"></div>
<div id="lightbox">
<div id="outerImageContainer">
<div id="imageContainer">
<img id="lightboxImage" src="foto2big.png" width=500 height=375 alt="">
<div id="hoverNav">
<a href="#" id="prevLink"></a>
<a href="#" id="nextLink"></a>
</div>
<div id="loading">
<a href="#" id="loadingLink">
<img src="images/loading.gif" alt="">
</a>
</div>
</div>
</div>
<div id="imageDataContainer">
<div id="imageData">
<div id="imageDetails">
<span id="caption">Didascalia immagine</span>
<span id="numberDisplay">Image 2 of 3</span>
</div>
<div id="bottomNav">
<a href="#" id="bottomNavClose">
<img src="images/closelabel.gif" alt="">
</a>
</div>
</div>
</div>
</div>
Per quanto riguarda il CSS degli ingrandimenti, una buona parte è presente nel file lightbox.css,
ma alcune dichiarazioni vengono aggiunte on the fly dallo script. In questo caso, quindi, è necessario
munirsi di un po' di pazienza e di uno strumento quale la Developer Toolbar per Internet Explorer o
Firebug per Firefox. Ho ricostruito, a beneficio di una personalizzazione più semplice,
anche la parte di CSS aggiunta dinamicamente da Javascript: questo è il risultato,
che emula perfettamente un'ingrandimento di Lightbox ma che non è soggetto allo script.
Il nostro esempio è la base di partenza ideale per poter personalizzare la presentazione
di Lightbox, senza dover dipendere dallo script. Ho pensato di tenere in un CSS separato,
che ho chiamato dynamic-lightbox.css, tutte le dichiarazioni aggiunte dallo script
e non presenti nel CSS originale di Lightbox, così da avere un facile riscontro su tutte le
regole effettive. Ecco il contenuto del CSS che ho elaborato:
div#overlay{height:100%;background:#000;opacity:0.8;filter:alpha(opacity=80)}
div#lightbox{position:absolute;top:50px;left:0}
div#outerImageContainer{position:relative;width:520px;height: 395px}
div#hoverNav{height: 385px}
div#imageDataContainer{width:520px}
div#loading{display:none}
Da evidenziare che il CSS è stato studiato sull'immagine dell'ingrandimento dell'esempio,
e se è utilissimo per lo sviluppo, è ininfluente, se non dannoso, in fase di implementazione.
Alcuni lettori avranno notato la dichiarazione filter:alpha(opacity=80) e magari
si stanno chiedendo di quale arcana proprietà si tratti: in realtà è una soluzione proprietaria
di Microsoft per ottenere elementi con opacità variabile. Inutile dire che in questo modo
il CSS non passa la validazione, ma dato che si tratta di un CSS usato solo per la fase di personalizzazione
e test di resa e da non usare in produzione, il problema a parer mio non si pone. Gli altri browser
semplicemente ignoreranno la dichiarazione, che viene comunque aggiunta in realtà dallo script.
Primi passi con la personalizzazione
Non so voi, ma personalmente trovo che Lightbox nella sua versione originale oscuri troppo la
pagina. Ho quindi preparato una prima modifica, in cui il nostro esempio di base
è stato schiarito grazie ai CSS. L'unica regola aggiuntiva dovrà quindi ridefinire il colore del
div semi-trasparente che ricopre l'intera pagina quando viene mostrato l'ingrandimento:
div#overlay{background: #E6EEFC}
Questa è solo una prima possibilità, ma dovrebbe mostrare bene le potenzialità che si presentano
intervenendo sulla presentazione di Lightbox: in maniera semplicissima è infatti possibile
modificare il colore di sfondo di pagina. In modo altrettanto semplice si potrà intervenire
sull'interfaccia grafica di Lightbox: sarà l'argomento della prossima parte dell'articolo. Non mancate!
Rivedere e localizzare l'interfaccia di Lightbox
Siamo così arrivati alla parte centrale dell'articolo: la personalizzazione di Lightbox con i CSS.
Per prima cosa, c'è da notare che termini quali Prev, Next e Close
potrebbero non essere così intuitivi per chi non conosce l'inglese. Inoltre, se vogliamo rivedere
l'interfaccia sarebbe bene modificare il testo dell'indicatore della didascalia: molto meglio
Immagine 2 di 3 che Image 2 of 3. A tal proposito, ho modificato lo script
alla riga 512: lo trovate nel file lightbox-ita.js all'interno dello zip per il
download che accompagna l'articolo.
In secondo luogo, c'è una caratteristica di Lightbox che trovo decisamente poco intuitiva:
il fatto che i link di navigazione tra le immagini del set non siano visibili a meno di non passare
il mouse sull'immagine corrente. In tal caso ho predisposto delle frecce di navigazione semi-trasparenti
che sono comunque visibili anche senza il passaggio del mouse. Siamo pronti a presentare l'esempio
e il suo screenshot leggermente ridotto:
Cominciamo dalla grafica: ho preparato tre immagini che rimpiazzeranno quelle originali dello script:
le due frecce di navigazione bianche su sfondo nero e il tasto "chiudi", che conserva le dimensioni
di dell'immagine originale. Eccole:
La base di partenza per l'esempio è quella dell'esempio di base,
svincolato dallo script. In particolare, è molto d'aiuto il markup, che permette di consultare facilmente la struttura generata dallo script.
Per quanto riguarda il CSS, ho pensato di mantenere intatti il file lightbox.css e
anche dynamic-lightbox.css (che in realtà contiene le dichiarazioni aggiunte dallo script)
così da non dover intervenire direttamente sulla presentazione di base ma piuttosto ridefinirla.
Nell'esempio si noterà che c'è un terzo file CSS nella sezione head di pagina,
ovvero lightbox-mod.css. Questo è il file per la skin di Lightbox che ho preparato, vediamo il suo
contenuto:
div#overlay{background: #303754}
#outerImageContainer,div#imageDataContainer{background: #000}
#imageData{color:#EEE}
#imageData #bottomNavClose img{visibility:hidden}
#imageData #bottomNavClose{background: url(../images/blackclose.png) no-repeat}
#prevLink,#nextLink{filter:alpha(opacity=30);opacity:0.3}
#prevLink,#prevLink:hover,#prevLink:visited:hover{
background: url(../images/blackprev.png) 1% 15% no-repeat}
#nextLink,#nextLink:hover,#nextLink:visited:hover{
background: url(../images/blacknext.png) 99% 15% no-repeat}
#prevLink:hover,#prevLink:visited:hover,
#nextLink:hover,#nextLink:visited:hover{
filter:alpha(opacity=95);opacity:0.95}
Vediamo di cosa si occupa il CSS nel dettaglio:
- Le prime tre regole definiscono il colore di sfondo della cornice e del colore
del testo. - Il secondo blocco di regole nasconde l'immagine della versione originale attraverso
visibility:hidden(così da
preservarne le dimensioni) e attribuisce lo sfondo con il testo in italiano. - L'ultima parte riguarda le frecce di navigazione tra le immagini, che in stato normale avranno
opacità pari al 30%, mentre in fase :hover saranno quasi totalmente coprenti.
Come si può notare ho usato proprietà quali opacity (che appartiene ai CSS3) e filter
(non standard, che serve per Internet Explorer). A questo punto si pone un problema: il CSS appena visto, da usare
non più in fase di sviluppo ma in produzione, non passa la validazione. Come procedere?
La soluzione più semplice per mantenere la validazione e poterne fruire è usare Javascript per inserire
il CSS della skin: ne ho parlato non molto tempo fa in CSS 3 a piccoli passi
e in particolare in questa pagina.
Se ovviamente il vostro tema non necessiterà di opacità variabile, vi basterà inserire il CSS direttamente
nella sezione head della pagina. In alternativa potrete procedere come nell'esempio che stiamo per presentare.
Dopo aver preparato la skin e verificato il supporto cross-browser del risultato, si può procedere
ad integrarla allo script. Ecco quindi una galleria di tre immagini con Lightbox
che usa il tema che abbiamo preparato. Le immagini di interfaccia sostitutive andranno sistemate nella cartella images,
mentre il CSS nella cartella omonima. Per quanto riguarda lo script che si occupa di aggiungere il CSS
del tema, andrà sistemato nella cartella js, e linkato nella sezione head con le seguenti righe:
<script src="js/addCSS.js" type="text/javascript"></script>
<script type="text/javascript">AddCSS("css/lightbox-mod.css");</script>
Questo è sostanzialmente tutto: è bastato procedere dall'esempio statico di base
passando per la versione statica modificata ottenendo infine una versione funzionante
e modificata di Lightbox.
Conclusioni
Abbiamo visto in questo articolo come poter utilizzare Lightbox,
e soprattutto come poterlo modificare a livello estetico con i CSS. Il processo non è dei più semplici, ma avendo a disposizione
l'esempio statico e il CSS relativo, non dovrebbe essere difficile poter personalizzare la presentazione degli ingrandimenti
di questa comoda libreria.
Il CSS del tema qui realizzato è stato verificato con successo sui principali browser su cui anche
la versione originale di Lightbox è supportata. Codice, immagini ed esempi sono disponibili per il download. Alla prossima!
