Lightbox con Jquery

lightbox-in-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.

<a href="/images/mucca1.jpg" class="lightbox">Pic</a>

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');

$('<div id="overlay"></div>')

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

.css('opacity', '0')

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

.appendTo('body');

&nbsp;

$('<div id="lightbox"></div>')

.hide()

.appendTo('body');

&nbsp;

$('<img/>')

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

.load(function(){

positionLightboxImage();

})

.click(function(){

removeLightbox();

})

.appenTo('#lightbox');

&nbsp;

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!

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

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