Creare una lightbox personalizzata con jQuery

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

lightbox-css3-jquery-big

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!

  1. Ciao Riccardo,
    interessanti e come sempre molto utili i tuoi script, volevo chiederti se è quale sia il comando che permetta la chiusura del box senza dover obbligatoriamente cliccare sulla X ma solo cliccando su un qualsiasi punto del monitor esterno alla foto.

  2. Ho aggiornato la versione introducendo anche il controllo dell’overflow verticale, come mi è stato segnalato da alcuni utenti. Enjoy!

    Vedi la sezione 08. Aggiornamenti e bugfix per ulteriori update del pacchetto!

  3. Ciao Riccardo, complimenti per gli articoli! Molto carina la sezione dell’overlay personalizzabile! Bravo, fa piacere leggere così!!

    Ascolta, nn so se puoi aiutarmi, io ho la necessità di creare appunto un avviso obbligatorio prima di accedere al mio sito.

    Mi basta inserire una immagine (ho scelto lightbox o colorbox per questo scopo) di grandezza variabile di volta in volta (e qui non mi aiuta l’esempio da te scritto per creare un overlay personalizzato poichè troppo vincolato alle misure fisse) ed in futuro un paragrafo … da inserire sotto la stessa immagine.

    Andiamo con calma, per ora non riesco ad inserire un evento all’apertura della pagina ASP che mi apra il lightbox contenente la JPG dell’avviso. tutti gli esempi in rete, mostrano l’uso del lightbox con il click su un banale link.. a me serve al caricamento della pagina!! TANTO PIU CHE HO GIA NEL BODY UN EVENTO ONLOAD presente che attiva un altro script.. come posso fare???

    Grazie.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Site inspiration creativo: War child

Site inspiration creativo: War child