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:
