Lightbox con Jquery

Il cliente ci chiede il Web 2.0, quindi noi gli diamo la quintessenza dell’effetto Web 2.0, ossia Lightbox. Lightbox e’ usato per far vedere a dimensione intera la miniatura di un’immagine in una finestra di dialogo. In genere l’intero sfondo si oscura per indicare che e’ stato disabilitato. I Lightbox sono molto comuni e molti sono caratterizzati da funzioni complesse, quali animazioni e transizioni, oltre alla possibilita’ di caricare video o contenuti, tramite l’intervento di Ajax.

Vediamo il codice per inserire un Lightbox, nella nostra pagina Html.

Pic

Quando l’immagine viene visualizzata, l’intero schermo deve diventare scuro; quindi introduciamo un div di grandi dimensioni nella pagina che abbia la stessa grandezza dello schermo. All’interno di questo div, aggiungeremo un altro div nel quale caricare l’immagine.

Ecco il CSS:

#overlay{

position absolute;

top:0;

left:0;

height:100%;

width:100%;

background: black url(loader.gif) no-repeat scroll center center;

}

#container{

position absolute;

}

In questo CSS che chiameremo per comodita’, lightbox.css, abbiamo dato un height e width 100% per occupare la misura dello schermo e abbiamo introdotto, al centro pagina, l’immagine loader.gif che altro non e’ che  l’immagine di un caricatore rotante al centro, che verra’ visualizzata quando iniziamo a caricare l’immagine.

Arrivati a questo punto abbiamo il file Html, il CSS, ma ci manca il codice jQuery… Eccolo:

$('a.lightbox').click(function(e){

//nasconde le barre di scorrimento!

$('body').css('overflow-y','hidden');

$('')

.css('top', $(document).scrollTop())

.css('opacity', '0')

.animate({'opacity': '0.5'},'slow')

.appendTo('body');

 

$('')

.hide()

.appendTo('body');

 

$('')

.attr('src', $(this).attr('href'))

.load(function(){

positionLightboxImage();

})

.click(function(){

removeLightbox();

})

.appenTo('#lightbox');

 

return false;

});

La sovrapposizione viene collocata nella parte superiore dello schermo e sfuma rapidamente da invisibile ad un’ opacita’ del 50% per fornire l’effetto dello sfondo. Il contenitore della lightbox viene aggiunto alla pagina e immediatamente nascosto, in attesa del caricamento dell’immagine. L’immagine viene aggiunta al contenitore e gli attributi src corrispondenti vengono impostati sulla posizione dell’immagine. Per effettuare questa operazione si ricorre al metodo attr di jQuery.

Hai provato ad inserire un Lightbox nel tuo sito web? Raccontaci la tua esperienza!