Come ingrandire un'immagine: semplice Lightbox

In questa "pillola" vedremo come ottenere, al click su una miniatura, la visualizzazione dell'immagine ingrandita, con le dimensioni massime possibili in rapporto alla finestra del browser utilizzato.

Nel codice HTML della pagina, prima del tag </body> inseriamo un div contenitore, con id fullbox che farà da sfondo all'ingrandimento dell'immagine

<div id="fullbox"></div>

a cui vengono assegnate le seguenti regole di stile:

#fullbox{
position: fixed;
width: 100%;
height: 100%;
left:0;
top:0;
display:none;
background: transparent url('../img/bg.png') repeat left top;
background: rgba(0, 0, 0, 0.9);
overflow: hidden;
z-index: 10;
cursor: pointer;
}

Con position: fixed; left:0; top:0; widht:100%; height:100%; il div viene posizionato a tutto schermo rispetto all'area visibile della finestra del browser, in modo che resti sopra tutti gli elementi contenuti nella pagina (z-index:10). Il colore dello sfondo è definito con notazione rgba (background: rgba(0, 0, 0, 0.9)) per far apparire in trasparenza la pagina sottostante. Per i browser che non supportano l'rgba (come IE7 e IE8) l'effetto trasparenza viene ottenuto con un'immagine png di sfondo: background: transparent url('../img/bg.png') repeat left top.

Il div non è visibile al caricamento della pagina (display:none); verrà visualizzato solo in seguito al click sulla miniatura, evento che determina l'esecuzione della funzione javascript fullboximg.

Questo il codice HTML del link presente sulla miniatura:

<a onclick="fullboximg('nomecartella/nomefileimgingrandita.ext', 380, 285, 15, 2); return false;" href="nomecartella/nomefileimgingrandita.ext">
<img alt="demo" src="nomecartella/nomefileimgminiatura.ext" /></a>

Onclick è l'evento javascript che corrisponde alla pressione del tasto sinistro del mouse. Alla funzione fullboximg vengono passati cinque parametri: l'URL assoluto o relativo dell'immagine (a), la larghezza dell'immagine (b), l'altezza dell'immagine (c), il valore di padding - distanza dell'immagine dal bordo della cornice (d) e lo spessore del bordo della cornice (e).
La funzione return false impedisce l'azione predefinita del collegamento, che porterebbe a visualizzare l'immagine direttamente nella finestra del browser. L'indirizzo dell'immagine nel collegamento è stato inserito per rendere il contenuto fruibile anche a chi naviga con javascript disabilitato.

In head, inseriamo il codice per includere la libreria JQuery

<script src='http://code.jquery.com/jquery-1.10.2.js'></script>

e, a seguire, il codice della funzione fullboximg:

function fullboximg(a, b, c, d, e){
winheight = $(window).height();
ratio = b/c;
cornice = (d + e)* 2;
if (winheight < (c+cornice)){
c = winheight - cornice - 20;
b = ratio * c;
}
$('div#fullbox').html('
<img alt="" class="imgfullbox" height="'+c+'" src="'+a+'" style="border-width: '+e+'px; margin-left: -'+(b/2+cornice/2)+'px; margin-top: -'+(c/2+cornice/2)+'px; padding: '+d+'px;" width="'+b+'" />
').fadeIn();
}

Con jQuery calcoliamo l'altezza della finestra ($(window).height()) e memorizziamo questo valore nella variabile winheight. L'istruzione condizionale if verifica se l'altezza della finestra del browser è inferiore all'altezza dell'immagine (compresi bordi e padding) e, in questo caso, ridimensiona l'immagine in modo che sia interamente visibile. La nuova larghezza viene calcolata utilizzando il rapporto tra larghezza e altezza dell'immagine originale, memorizzato nella variabile ratio.

Calcolati e memorizzati i valori corretti, con il metodo html di jQuery inseriamo il tag img e i relativi stili dinamici (border-width, margin-left, margin-top, height e width) nel div fullbox. All'immagine viene attribuita la classe imgfullbox, in modo da poter scrivere direttamente in un file css collegato alla pagina le regole di stile che restano costanti (posizione, colore e tipo di bordo) poiché indipendenti dalle dimensioni della finestra del browser.

.imgfullbox{
border-style:solid;
border-color:#4e494f;
top: 50%;
left: 50%;
position: absolute;
}

Il codice javascript per chiudere l'immagine ingrandita al click del mouse può essere scritto direttamente nella funzione fullboximg oppure dopo il codice html del div fullbox:

$('div#fullbox').click(function(){
$(this).fadeOut();
});

DEMO