Posts Tagged ‘lightbox’

Utilizzare lightbox su immagini caricate con innerHTML

Il lightbox è un’applicazione javascript per la visualizzazione delle immagini in maniera elegante. Per maggiori informazioni sull’utilizzo e per il download dei files andate qui.

Il lightbox è uno strumento molto utilizzato. Di recente mi è capitato di dover utilizzare il lightbox su immagini caricate dinamicamente all’interno di un div; dopo svariate prove sono giunto a utilizzare la seguente funzione javascript:

<script type="text/javascript" language="javascript">
function showImage(w,h,image) {
 var obj=document.getElementById("id_div");
 obj.innerHTML="";
 obj.innerHTML+="<a href='"+image+"' rel='lightbox'><img src='"+image+"' width='"+w+"' height='"+h+"'></a>";
 initLightbox();
 }
</script>

<div id="id_div">
</div>

La funzione showImage() va a scrivere all’interno del div con id uguale a “id_div” inserendo sia il tag <a> che il tag <img> con il metodo innerHTML, passando anche l’altezza e la larghezza che dovrà avere l’immagine. Ovviamente per poter far funzionare il lightbox bisogna inserire all’interno del tag <a> l’attributo rel=”lightbox”.
Dopodiché bisogna reinizializzare il lightbox tramite la funzione initLightbox(), questo accade perché ogni variazione dinamica dell’HTML sul codice delle immagini richiede la reinizializzazione del lightbox.
Nota: il primo innerHTML con argomento vuoto serve a evitare che le chiamate della funzione successive alla prima abbiano come effetto la sovrapposizione delle immagini precedentemente caricate.

Un’altra soluzione molto simile alla prima è la seguente:

<script type="text/javascript" language="javascript">
function showImage(w,h,image) {
 var obj=document.getElementById("linkID");
 var objIMG=document.getElementById("imgID");
 obj.href=image;
 objIMG.src=image;
 objIMG.width=w;
 objIMG.height=h;
 initLightbox();
 }
</script>

<div id="id_div">
<a id="linkID" rel="lightbox"><img id="imgID"  /></a>
</div>

La differenza rispetto al caso precedente sta nell’inserire a priori all’interno del div i tag <a> e <img> e nell’inserire dinamicamente i contenuti degli attributi.
L’utilizzo della funzione è molto semplice, basta richiamarla in un qualsiasi punto della pagina web, ad esempio tramite onclick dentro un tag.

Entrambe le soluzioni proposte sono state testate su firefox 4/5 e su IE9.