Ancora una lightbox??? Ma basta!!!!!

e invece no! Ecco ancora un’altro script per la realizzazione dell’effetto lightbox nelle pagine web.

Perchè? Semplice: ne volevo uno leggerissimo, facilissimo da capire in quanto mi serviva per spiegare il meccanismo ai miei studenti, e soprattutto che contenesse istruzioni molto elementari (ovviamente nei limiti consentiti da uno script che comunque aggiunge oggetti al DOM e ne setta le proprietà ed i metodi).

Dopo aver cercato un po’ in giro, mi è venuta una idea leggendo questo post:

http://www.ranfar.com/programmazione/248-htmlbox-creare-un-effetto-lightbox-per-codice-html-generico

Si tratta di un esempio veramente semplice da comprendere, addirittura più semplice di quello che avrei desiderato. Ovviamente ho voluto poi fare di testa mia e ho aggiunto la creazione dinamica degli elementi del DOM e ho semplificato ulteriormente l’impatto che lo script ha sulle singole pagine html in cui viene utilizzato.

L’idea è semplice:

1) dove voglio inserire l’effetto “lightbox” uso una funzione che si chiama

ss_ingrandisci( file )

alla quale passo come parametro il nome dell’immagine da visualizzare (quella ingrandita che apparirà sopra la pagina).

Ad esempio, un elemento IMG potrebbe essere scritto così:

<img src="/mini/file.jpg"  onclick="ss_ingrandisci('large/file.jpg')"/>

2) Nella sezione head inserisco il richiamo al CSS:

<link href="ss_lightbox.css" type="text/css" rel="stylesheet"/>

3) In fondo alla pagina, prima del tag di chiusura, richiamo lo script in modo che venga eseguito e crei gli elementi necessari al funzionamento:

<script type=”text/javascript” src=”ss_lightbox.js”></script>

Come funziona

Il principio è semplice si basa su due div ed una img:

  1.  “img_sfondo”, un div ombreggiato che farà da sfondo e che coprirà in modo semitrasparente la pagina
  2. img_contenitore“, un div contenitore per immagine che sarà posto sopra img_sfondo
  3. img_maxy“, l’immagine da visualizzare, contenuta nel div img_contenitore

i tre elementi vengono creati e aggiunti in testa alla pagina che li ospiterà. I due div vengono inizialmente nascosti.

Quando viene fatto un click su una immagine, viene richiamata la funzione ss_ingrandisci() e si verificano i seguenti eventi:

1) viene assegnato alla proprieta src di img_maxy il nome del file che vogliamo visualizzare

2) in attesa che il caricamento del file venga completato, viene visualizzato lo sfondo ombreggiato (img_sfondo) con al centro la gif animata che indica il caricamento in corso

3) dopo il caricamento dell’immagine (evento “onload”), viene calcolata la larghezza della finestra del browser e dell’immagine, in modo da centrarla orizzontalmente, e quindi viene reso visibile il div img_contenitore

I file necessari sono disponibili qui!!!

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...