2 febbraio 2014

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 immagine ingrandita lightbox
DEMO


5 commenti:

  1. Ho dei problemi per quanto riguarda l'inserimento del return false in php, siccome devo estrarre l'immagine dal database, mi passa direttamente alla pagina nuova del browser. E' come se lo bypassasse...

    RispondiElimina
    Risposte
    1. Ciao,
      da quello che dici sembrerebbe un errore javascript più che un problema PHP. La console ti dà qualche errore? Hai incluso la libreria jQuery?

      Elimina
  2. Sisi l'ho messa nell'head come hai specificato.
    Più che altro non entra proprio nello script, va direttamente alla pagina dell'immagine...
    Ti posto la parte di codice così capisci un po di più.

    RispondiElimina
    Risposte
    1. Ah non me lo fa mettere...

      Elimina
    2. Ciao,
      se vuoi farci vedere del codice puoi contattarci via mail.

      Elimina