lightbox2Lightbox 2 è uno script javascript basato sul framework prototype e sulla libreria scriptaculus, è di semplice utilizzo e permette di ottenere una gradevole presentazione per immagini e gallerie. E’ molto utilizzato in quanto consente una buona personalizzazione attraverso i css, le immagini ed i parametri nel file lightbox.js.

Utilizzando questo script mi sono però accorto che il file lightbox.css riporta un’errore se controllato con il validatore css del w3c. L’errore riportato interessa la proprietà background alla linea 13 del file lightbox.css:

background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */

Questa sintassi può apparire sconosciuta ma è in realtà un semplice trucco per far sì che Internet explorer riconosca l’hover del mouse sugli elementi con id #prevLink e #nextLink inserendo un’immagine di background e mostri quindi le immagini prev e next all’hover del mouse.

Un modo semplice per risolvere è creare un’immagine gif trasparente di 1x1px e metterla come sfondo.

background-image: url(image/blank.gif); /* Trick IE into showing hover */

O in alternativa inserire come immagine di background un’immagine che non esiste.

La problematica di questi due sistemi è che dovendo utilizzare javascript il nostro primo pensiero è la velocità di esecuzione e mettere un’immagine di dimensioni irrilevanti o linkare ad un’immagine che non esiste ci porta ad una chiamata al server per far caricare sul browser un’immagine inesistente o irrilevante.

Per questo motivo è stato utilizzato l’algoritmo base64 che permette di convertire in caratteri ascii un file. In questa maniera il file è già presente anche se convertito e va solo “trasformato” e non “richiamato” dal browser.

Esiste comunque una soluzione per mantenere l’algoritmo in base64 e la validazione del css. La conversione in base64 è corretta, il problema è la sintassi dell’url nel css, in particolare del data URI scheme, uno schema uri che permette di inserire oggetti come testo in una pagina web come se fosse un riferimento esterno, la sintassi è appunto:

data:[<MIME-type>][;charset=”<encoding>”][;base64],<data>

Per inserirlo correttamente nel css è indispensabile ricordare l’utilizzo degli apici per non generare un errore di validazione. Sarà dunque sufficiente sostituire:

background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */

con:

background-image: url(‘data:image/gif;base64,AAAA‘); /* Trick IE into showing hover */

E il css verrà validato.

Faccio presente che ‘data:image/gif;base64,AAAA‘ non restituisce in output un’immagine ma una stringa ed è quindi come impostare un’immagine di background che non esiste o con url errato, il vantaggio reale è che si risparmia una richiesta al server migliorando la performance dello script.

Essendo le tecnologie citate molto specifiche ho preferito utilizzare un gergo meno tecnico per semplificare i concetti di fondo, spero non mi vogliano male coloro che lavorano con queste ogni giorno e hanno competenze molto più specifiche delle mie.

Alla prossima.

links utili:
http://www.lokeshdhakar.com/projects/lightbox2/
http://www.prototypejs.org/
http://script.aculo.us/
http://jigsaw.w3.org/css-validator/
http://it.wikipedia.org/wiki/Base64
http://en.wikipedia.org/wiki/Data_URI_scheme