Lightbox 2

Lightbox è un applicativo scritto da Lokesh Dhakar in Javascript che permette la creazione di gallerie fotografiche sul web.

Questo sito, nelle photogallery utilizza una versione modificata di lightbox per la visualizzazione.

In queste pagine è mia intenzione documentare queste funzionalità aggiuntive da me implementate.

In breve: ridimenzionamento automatico delle immagini in base all’area visibile del browser o in base a limiti di altezza e larghezza prefissati.

File modificati

Lightbox è composto dai seguenti file:

  • js/lightbox.js: modificato
  • js/effects.js: nessuna modifica
  • js/prototype.js: nessuna modifica
  • js/scriptaculous.js: nessuna modifica
  • css/lightbox.css: nessuna modifica

La modifica

Motivazioni

Allo stato originale, Lightbox, in presenza di immagini più grandi della superficie di visualizzazione del browser, non effettua ridimensionamenti, proponendo le immagini a dimenzione originale con lo svantaggio di dover utilizzare le barre di scorrimento per la visualizzazione con un ovvio impatto antiestetico.

Qui potrete trovare la dimostrazione delle funzionalità aggiuntive!

Dettagli

Il file lightbox.js è l’unico file che ha subito delle modifiche.

Nella parte relativa alla configurazione sono state aggiunte le seguenti linee:

var autoSize=true;

var maxWidth=0;

var maxHeight=0;

La variabile autoSize serve per abilitare la nuova funzione.

La variabile maxWidth setta la larghezza massima della foto.

La variabile maxHeight setta l’altezza massima della foto.

Se la variabile maxHeight (e/o maxWidth) è impostata a 0 il rispettivo valore sarà automatico, ciò dipenderà dall’area visibile del browser.

Nel caso in cui la dimenzione della foto rientra già nei limiti impostati, la nuova funzionalità non entrerà in funzione.

Nella parte relativa ai metodi per gli elementi sono state aggiunte le seguenti linee:

setHeightImg: function(element,height) {

element = $(element);

element.height = height;

},

setWidthImg: function(element,width) {

element = $(element);

element.width = width;

},

La funzione setWidthImg aggiunge il parametro Width all’immagine visualizzata per effettuarne il ridimenzionamento, stessa cosa per setHeightImg (che aggiunge il parametro Height).

Nella parte relativa alla visualizzazione delle immagini sono state aggiunte le seguenti linee:

if (autoSize==true)

{

Element.setTop('lightbox', arrayPageScroll[1]+10);

//se autosize=true lascia come distanza dall'alto 10px

}

else

{

Element.setTop('lightbox', lightboxTop);

//se autoSize=false lascia la distanza dall'alto come quella originale

}

...

...

...

...

if (autoSize==true)

	{

	var winW = 630, winH = 460;

	if (parseInt(navigator.appVersion)>3) {

	 if (navigator.appName=="Netscape") {

	  winW = window.innerWidth;

	  winH = window.innerHeight;

	 }

	 if (navigator.appName.indexOf("Microsoft")!=-1) {

	  winW = document.body.offsetWidth;

	  winH = document.body.offsetHeight;

	 }

	}

	if (maxWidth==0)

	  maxWidth=winW-70;

	if (maxHeight==0)

	  maxHeight=winH-90;

	if (imgPreloader.width>maxWidth)

		{

		width=maxWidth;

		fattore=imgPreloader.width/width;

		height=imgPreloader.height/fattore;

		}

	else

		{

		width=imgPreloader.width;

		height=imgPreloader.height;

		}

	if (height>maxHeight)

		{

		tmpHeight=maxHeight;

		fattore=height/tmpHeight;

		height=maxHeight;

		width=width/fattore;

		}

	Element.setWidthImg('lightboxImage', width);

	Element.setHeightImg('lightboxImage', height);

	myLightbox.resizeImageContainer(width, height);

	}

else

	{

	myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);

	}

Considetando le spiegazioni date fin’ora il codice dovrebbe autocommentarsi da solo.

Visualizza il file lightbox.js completo.

In download, la versione modificata del software.

Qui potrete trovare la dimostrazione delle funzionalità aggiuntive!

Come si usa

Un esauriente guida sull’utilizzo di lightbox la puoi trovare sul sito dell’autore

Per l’utilizzo della funzionalità aggiuntiva, dovrete scaricare la versione da me modificata dall’area download.

Demo

Qui potrete trovare la dimostrazione delle funzionalità aggiuntive!

Download

Nome Dimensione Descrizione
lightboxmod.zip 284 Kbytes Lightbox, versione modificata: contiene anche un esempio utile per il suo utilizzo.