unodeitanti.com

Con jQuery è possibile realizzare di tutto. E se ne sono accorti anche quelli di LightBox. Quindi ho pensato di realizzare una piccola guida che vi spiega come si fa ad integrare jQuery LightBox al vostro sito web. Per chi non la conoscesse, jQuery LightBox è un plug-in per il noto framework. La versione “classica” di LightBox è decisamente meno versatile. La potenza di jQuery ci permette di integrarla in modo molto rapido.

Gli interventi da fare sono due e sono sul codice html e su quello javascript. Analizziamo prima il codice HTML, e …

definiamo il “contenitore”, ovvero un div, delle immagini ed assegnamo un id a questo elemento.
<div id=”la_galleria”></div>

Al suo interno, inseriremo le immagini.
<div id=”la_galleria”>

<img src=”[...]” /div>
<img src=”[...]” /div>
…
<img src=”[...]” /div>

</div>

Facciamo si che ogni immagine sia anche un collegamento nel modo seguente
<div id=”la_galleria”>

<a href=”…”><img src=”…” alt=”" /></a>
<a href=”…”><img src=”…” alt=”" /></a>
…
<a href=”…”><img src=”…” alt=”" /></a>

</div>

Ed ora la seconda parte: come intervenire nel codice javascript:

Cosa fare nel codice Javascript:
$(‘#la_galleria a’).ligntBox();

Ovviamente il selettore “#id_galleria a” sta ad indicare tutti i collegamenti che si trovano dento l’elemento con id=”la_galleria”.

Molto bene: il mio esempio era generico. Ora se volete potete scaricare il codice di esempio che potete trovare direttamente nella pagina del plugin. Qui di seguito, mi elenco anche qualche altro link interessante su altri articoli che riguardano jQuery LightBox. Non limitatevi a questo post, osservate anche come il resto della rete ha fatto uso di questo fantastico elemento di jQuery.

Pagina ufficiale di jQuery LighjtBox

Integrazione con drupal

I migliori scripts di LinghtBox, facebook ed altri esempi

Un sacco di esempi, nell’edizione di balupton.com

Download di GoogleCode

Una marea di cloni di LightBox