Dopo aver analizzato il LightBox, prendiamo in esame una delle sue migliori alternative, lo Shadowbox. Dal sito ufficiale possiamo settare dalla pagina dei download la tipologia specifica di pacchetto che vogliamo scaricare: possiamo decidere quindi tra una versione base per visualizzare le sole immagini, e le versioni avanzate per filmati Swf, QuickTime, Windows Media Player. Possiamo inoltre selezionare da un menù a tendina la compatibilità con altre librerie Javascript, nel caso fossero presenti conflitti con altri plugin nel nostro sito.
Shadowbox supporta IE6+, Firefox 1.5+, Safari 2+, Chrome 1 e Opera 9+.
Vediamo innanzitutto come includere le immagini. Scarichiamo il contenuto dell’archivio nella cartella del nostro sito e creiamo una pagina Index.html. All’interno del Tag <head> inseriamo il seguente codice:
Ora mettiamo un’immagine .jpg nella nostra cartella, e chiamiamola myimage.
All’interno del <body> richiamiamo lo Shadowbox con
My Image
Se vogliamo aggiungere un titolo alla nostra foto, basterà aggiungere il seguente attributo:
My Image
Salviamo e testiamo la nostra prova.
Possiamo inoltre predisporre gallerie di contenuti similari, per esempio organizzando una raccolta di foto dalle nostre vacanze, consultabili anche tramite i tasti freccia.
The Beach The Pier
Aggiungiamo un filmato swf con lo stesso metodo, specificandone l’altezza e la larghezza.
My Movie
Possiamo inoltre creare gallerie di contenuti misti, alternando immagini a filmati:
jpg swf movie frame
Dalla pagina options del sito ufficiale sono inoltre elencate tutte le classi facilmente configurabili dal file css incluso nel pacchetto, per rendere il nostro Shadowbox più personale.
A questo punto possiamo aggiungere un piccolo Javascript per mettere i thumbnails in evidenza col rollover . Creiamo due file della nostra anteprima, ossia due miniature della foto che poi verrà mostrata dallo Shadowbox: uno normale, e uno con l’alpha dimezzato del 50%, entrambi dalle dimensioni non superiori ai 100×100 pixel. Chiamiamo lo stato normale MyImage_small, e MyImage_small_RO lo stato rollover. Nel <body> aggiungiamo il seguente html:
//questo richiama Shadowbox
Il codice di Shadowbox è completamente open source.
Alla prossima!