Creare una lightbox personalizzata con jQuery

Oggi vediamo come creare una lightbox personalizzata con JQuery ideale per tutti i nostri progetti. Nel tutorial troverete anche alcune risorse grafiche d’effetto per creare subito la vostra fantastica lightbox. Ideale per coloro che vogliono sperimentare e rendere il proprio sito “unico”.

Si sa, esistono molte lightbox in circolazione, dalla piu popolare fancybox al meno conosciuto colorbox. Tutte sono sicuramente soluzioni professionali altamente performanti  e personalizzabili. Tuttavia non sono uniche proprio perchè usano codice molto complesso che non tutti sanno modificare interamente per renderle “uniche”. Se volete cimentarvi in qualcosa di più “personale” potete usare questo tutorial come trampolino di lancio per creare la vostra, personale, lightbox in JQuery per i vostri progetti.

GUARDA LA DEMO >>

01. Anatomia di una lightbox

Per lightbox si intente un popup a schermo che viene attivato mediante click, dove viene visualizzato qualcosa a schermo (immagini, testo o quant’altro). Se state muovendo i primi passi con jQuery vi consiglio di dare un’occhiata anche a queste due soluzioni, con codice molto lineare e “semplice” per comprendere al meglio l’overlay e questo tipo di animazioni, ormai usati praticamente da tutti.

– Overlay al click 

– Overlay al caricamento della pagina automatico

02. Struttura HTML

La struttura html da inserire per usare la lightbox è molto semplice:

    <a href="images/big/01.jpg" class="lightbox"><img src="images/thumb/01.jpg" /></a>
    <a href="images/big/02.jpg" class="lightbox"><img src="images/thumb/02.jpg" /></a>
    <a href="images/big/03.jpg" class="lightbox"><img src="images/thumb/03.jpg" /></a>
    <a href="images/big/04.jpg" class="lightbox"><img src="images/thumb/04.jpg" /></a>

Come vedete ho usato la thumb e un link che conterrà l’immagine “grande” da far apparire. Ricordatevi di inserire anche le librerie jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

A questo punto incorporate lo script lightbox.js contenente la nostra lightbox:

<script src="js/lightbox.js"></script>

03. Stile FULL css3

Per lo stile css3 ho usato la tecnica skew per rendere le thumb “diverse dal solito standard”. L’uso di skew è relativamente semplice: si tratta di dare un’inclinazione nell’asse X e Y dell’immagine (nel nostro caso la thumb):

transform: skew(0deg, -2deg);
-webkit-transform: skew(0deg, -2deg);
-o-transform: skew(0deg, -2deg);
-moz-transform: skew(0deg, -2deg);

lo skew è compatibile con tutti i maggiori browser next gen purtroppo non lo è su IE8 (e precendenti). Per il resto dello stile ho usato le tecniche box-shadow e border radius, che ho reso poi compatibili con IE8 grazie a CSS3 PIE.

L’aspetto più interessante del css è l’uso del div overlay che ho usato per contenere lo spinner del caricamento dell’immagine.

04. Diamo vita alla lightbox

Veniamo ora alla lightbox, aprite il file lightbox.js e modificate il parametro:

 var dissolvenza = 500;

impostando la durata del fade di apertura e chiusura della vostra lightbox.

La lightbox appare esattamente nel centro dello schermo automaticamente e a tutte le risoluzioni grazie a questo codice che prende il valore massimo dello schermo (funzioni width e height di JQuery) e le divide per 2 (esattamente la metà) in questo modo possiamo far apparire il #lightbox-cont esattamente al centro dello schermo a tutte le risoluzioni.

var top = ($(window).height() - $("#lightbox-cont").height()) /2;
var left = ($(window).width() - $("#lightbox-cont").width()) /2;

Spendo ancora due righe per spiegare il motore vero e proprio della lightbox:

$("<img />").attr("src", $(this).attr("href")).load(function(){ positionLightboxImage();}).appendTo("#lightbox-cont");

Grazie a questa semplice riga di codice recuperiamo l’attributo href (percorso all’immagine BIG), e lo assegnamo all’attributo src della nostra immagine, recuperando di fatto:

<img src="percorso attributo href" />

Dopodichè carichiamo l’immagine dentro il nostro contenitore #lightbox-cont che verrà centrato grazie alla funzione positionLightboxImage.

Altrettanto buona la soluzione di chiusura del lightbox dove viene assegnato oltre al tempo di fadeOut anche una funzione che rimuove gli elementi dal dom rendendo di fatto fruibile un nuovo ciclo di apertura.

$(".overlay,#lightbox-cont").fadeOut(dissolvenza,function(){$(this).remove(); });

05. Approfondimenti e letture consigliate

– funzione width()

– funzione height()

– funzione attr()

– Libro Jquery Guida completa di APOGEO (ottima!)

06. Demo e Download

DEMO | DOWNLOAD

07. Feature principali

– Css3 styling IE8 compatible (escluso lo skew)

– Facile da usare e da modificare a differenza delle altre lightbox “famose”

– Codice commentato rivisitabile (ad esempio provate a usare l’easing per far apparire il box!)

Spero vi sia utile a presto!

08. Aggiornamenti e bugfix

– Ora quando si clicca sull’overlay si chiude la lightbox

– Aggiunta feature elimina/ripristina scroll quando si apre e si chiude la lightbox.

Foto credits:

– © hfng – Fotolia.com

– © Gabi Moisa – Fotolia.com

Commentate e condividete!