Stefan Manastirliu

Shadowbox è un script Javascript che fa da “visualizzatore” di immagini, ma non solo, per il vostro sito internet.
Shadowbox nasce sulla scia di Lightbox e altri script simili, ma è in assoluto il mio preferito per diversi motivi:
è multipiattaforma, cross-browser, leggero, altamente configurabile e semplice da utilizzare.

Ma non è tutto, quello che mi piace di più di questo script è che lo potete utilizzare in associazione tutti i più famosi framework javascript (YUI, Prototype + Scriptaculous, jQuery, Ext, MooTools, Dojo) grazie ad un file “adattatore” che va caricato insieme al file principale.

Adesso vediamo qualche esempio di utilizzo e delle potenzialità di questo script utilizzando jQuery.

Per prima cosa, dobbiamo procurarci tutto ciò che ci serve e caricarlo all’interno della pagina in cui voglia usare lo script. Più in dettaglio dobbiamo procurarci e caricare la libreria jQuery, il file Shadowbox.js e l’adattatore.

<script src="src/js/lib/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="src/js/adapter/shadowbox-jquery.js" type="text/javascript"><!--mce:1--></script>
<script src="src/js/shadowbox.js" type="text/javascript"><!--mce:2--></script>

A questo punto abbiamo tutto il necessario e non ci resta che attivare lo script, e lo facciamo utilizzando la sua funzione di “inizializzazione” che imposta lo script con i parametri predefiniti, e lo facciamo nel momento in cui il DOM è pronto, ovvero la nostra pagina è stata caricata, utilizzando jQuery per gestire questo evento:

<script type="text/javascript"><!--mce:3--></script>

In questo modo abbiamo inizializato lo script che è ora pronto per essere utilizzato. Per poterlo applicare alle immagini all’interno della nostra pagina è sufficiente aggiungere l’attributo rel=”shadowbox” per un’immagine singola e rel=”shadowbox[nome_galleria]“ se vogliamo che l’immagine faccia parte di una galleria, dai noi chiamata nome_galleria, vediamo un esempio:

<a rel="shadowbox" href="images/Colosseum4.jpg"><img src="images/Colosseum4.jpg" alt="" width="100" height="80" /></a>
<a rel="shadowbox[gallery]" href="images/Constantine1.jpg"><img src="images/Constantine1.jpg" alt="" width="100" height="80" /></a>
<a rel="shadowbox[gallery]" href="images/Sarcophagus6.jpg"><img src="images/Sarcophagus6.jpg" alt="" width="100" height="80" /></a>

In questo caso i link sono applicati alle miniature delle immagini stesse, ma non è necessario che le immagini siano presenti nella pagina html, è solo necessario che ci sia un link che le punti.

Abbiamo visto il metodo più semplice di utilizzo che potete anche vedere dalla pagina di esempio, ma vediamo ora di sfruttare jQuery per ottimizzarne l’utilizzo.
Un primo miglioramento che si potrebbe effettuare è quello di allegerire il markup html, evitando di inserire l’attributo rel e usando un modo alternativo, usando jQuery e la funzione
setup fornita dallo script, per collegare i link che vogliamo con shadowbox.
Possiamo utilizzare per esempio come criterio la classe di un link, vediamo come:

<script type="text/javascript"><!--mce:4--></script>
 
....

<a class="imgLink" rel="shadowbox" href="images/Colosseum4.jpg"><img src="images/Colosseum4.jpg" alt="" width="100" height="80" /></a>
<a class="imgLink" rel="shadowbox[gallery]" href="images/Constantine1.jpg"><img src="images/Constantine1.jpg" alt="" width="100" height="80" /></a>
<a class="imgLink" rel="shadowbox[gallery]" href="images/Sarcophagus6.jpg"><img src="images/Sarcophagus6.jpg" alt="" width="100" height="80" /></a>

Per prima cosa, utilizzando skipSetup diciamo allo script di non configurarsi con i parametri predefiniti. Poi ci creiamo un oggetto per impostare manualmente la varie opzioni(potete trovare l’elenco completo nel sito) e successivamente attraverso la funzione setup leghiamo shadowbox a un oggetto, in questo caso abbiamo “estratto” utilizzando jQuery tutti i link presenti nella pagina con classe imgLink.

Potete vedere questo utilizzo nella seconda pagina di esempio, ma possiamo fare ancora molto di più!
Vedremo come migliorare e personalizzare ancora di più shadowbox, nella seconda parte, a breve!
Ciao!