Corsi on-line

Una photogallery con lightbox

Avere una bella photogallery tutta per noi e altamente personalizzabile non è mai stato così semplice. In aiuto ci viene come al solito jQuery, tramite uno dei suoi più utilizzati plugin: LightBox.

L’effetto che è possibile ottenere tramite LightBox è quello di aprire l’immagine su di una specie di pop-up (in realtà si tratta di un <div> overlayer). L’immagine viene portata in sovraimpressione e lo sfondo è reso più scuro e semitrasparente.
Inoltre è presente un sistema di navigazione che permette di muoversi all’interno della photogallery direttamente con le immagini sempre in primo piano.

Come forse molti di voi ricorderanno questo plugin non è stato sviluppanto inizialmente con jQuery, ma tramite il suo “papà” prototype.
La crescita di  jQuery ha avviato lo sviluppo di questa nuova versione, migliorando il plugin in efficienza e flessibilità. Non è necessario modificare il codice HTML, ma solamente utilizzare jQuery per selezionare su quali immagini applicare il plugin.

Per prima cosa scaricate il pacchetto e scompattatelo nella root del vostro sito. Inserite nella vostra pagina i riferimenti alla libreria jQuery, il javascript del plugin ed il file CSS:

&amp;lt;!-- Da inserire nell'intestazione della pagina HTML --&amp;gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;js/jquery.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;js/jquery.lightbox-0.5.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;css/jquery.lightbox-0.5.css&amp;quot; media=&amp;quot;screen&amp;quot; /&amp;gt;
&amp;lt;!-- Da inserire nell'intestazione della pagina HTML --&amp;gt;

dopodichè richiamate la funzione jQuery:

&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
$(function() {
  $('#galleria a').lightBox();
});
&amp;lt;/script&amp;gt;

La funzione applicherà l’effetto a tutte le immagini linkate all’interno del div con ID “galleria”, ad esempio:

&amp;lt;div id=&amp;quot;galleria&amp;quot;&amp;gt;
&amp;lt;a href=&amp;quot;photos/image1.jpg&amp;quot; title=&amp;quot;Questo è un esempio!&amp;quot;&amp;gt;&amp;lt;img src=&amp;quot;photos/thumb_image1.jpg&amp;quot; width=&amp;quot;72&amp;quot; height=&amp;quot;72&amp;quot; alt=&amp;quot;&amp;quot; /&amp;gt;&amp;lt;/a&amp;gt;
&amp;lt;/div&amp;gt;

L’utilizzo di questo plugin è veramente alla portata di tutti e la sua semplicità permette ottimi risultati. Unico difetto forse è il non corretto ridimensionamento in caso di immagini di dimensioni troppo grandi, ma per il resto assolutamente da provare.

Post correlati
  • Salve,
    diciamo che come plugin per immagini, quello in questo post (lightbox) è stato praticamente il primo.
    Io personalemte preferisco Fancybox.
    Credo sia molto più versatile e facile da configurare.
    Almeno questo è il mio parere.

I più letti del mese
Tematiche