jQuery: effetto lightbox

Proviamo a costruire un feetto lightbox fatto in casa.

Ovviamente esistono molti plugin che fanno questo in modo estremamente evoluto, ma il nostro scopo è vedere un po’ cosa c’è dietro le quinte e magari avere una base per delle personalizzazioni.

Come risorse esterne serve solo jQuery e due immagini, un ajax loader per avvisare l’utente della richiesta e l’immagine naturalmente.

Nell’html mettiamo solo un contenitore on un link dove specifichiamo nell’href il path dell’immagine.

<div id=”contenitore”>
<a href=”images/mare.jpg”>pic</a>
</div>

Il css conterrà la formattazione per un overlay fra la pagine e l’immagine e l’id lightbox vero e proprio:

#overlay {position: fixed;top: 0;left: 0;height: 100%;width: 100%;background: black url(images/loader.gif) no-repeat scroll center center;}
#lightbox {position: fixed;}

Quindi prima cosa al caricamento bind del click sul nostro link:

$(‘a.lightbox’).click(function(e) {

Quindi nascondiamo la scrollbar:

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

E poi appendiamo al body il div overlay, va appeso al top della pagina e animato in modo che da opacità 0, completamente opaco, arriva a semitrasparente:

$(‘<div id=”overlay”></div>’)
.css(‘top’, $(document).scrollTop())
.css(‘opacity’, ’0′)
.animate({‘opacity’: ’0.5′}, ‘slow’)
.appendTo(‘body’);

Appendiamo al body anche il div lightbox, ma nascosto:

$(‘<div id=”lightbox”></div>’)
.hide()
.appendTo(‘body’);

Creiamo l’immagine leggendo il src dall’href su cui c’è stato il click:

$(‘<img>’)
.attr(‘src’, $(this).attr(‘href’))

e la carichiamo:

.load(function() {
positionLightboxImage();
})

A caricamento avvenuto la posizioniamo con una funzione ad hoc al centro della pagina e la mostriamo con il adeIn(), era nascosta prima:

function positionLightboxImage() {
var top = ($(window).height() – $(‘#lightbox’).height()) / 2;
var left = ($(window).width() – $(‘#lightbox’).width()) / 2;
$(‘#lightbox’)
.css({
‘top’: top + $(document).scrollTop(),
‘left’: left
})
.fadeIn();
}

Al click sull’immagine al contrario la nascondiamo, o meglio, la rimuoviamo del tutto:

.click(function() {
removeLightbox();
})
function removeLightbox() {
$(‘#overlay, #lightbox’)
.fadeOut(‘slow’, function() {
$(this).remove();
$(‘body’).css(‘overflow-y’, ‘auto’); // show scrollbars!
});
}

Rirpistinando con questa funzione quindi lo stato iniziale della pagina:

Esempio