Shadowbox con Javascript e Css

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: