Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS Download

Popup di immagini con iPop

di: Cesare Lamanna 27 Novembre 2006

Questa settimana presentiamo uno script in grado di semplificare la gestione di immagini thumbnail (miniature) da aprire in una finestra popup nelle loro dimensioni originali. Lo script si chiama iPop ed è stato creato da David Schontzler. Come si intuisce, si presta particolarmente nella gestione di gallerie fotografiche e affini.

Come si usa

Per prima cosa vediamo cosa troverete nel pacchetto zip allegato:

i tre esempi che andremo a realizzare nel corso dell'articolo;
lo script ipop.js;
quattro immagini in formato miniatura e ingrandite;
il file readme.txt con le istruzioni in inglese e la licenza d'uso dello script.

Prima di iniziare ad applicare iPop alle nostre immagini, è opportuno dare un'occhiata allo script.

Nella sezione iniziale presenta una serie di opzioni che possiamo modificare per personalizzare il funzionamento. Vediamole.

iPop.DegradeTarget = "_self";

Questa risulta utile nel caso in cui l'utente navighi con Javascript disabilitato. Imposta un target per l'apertura dell'immagine. Il valore di default è _self. Significa che l'immagine ingrandita si aprirà nella stessa finestra.

iPop.ClickImageToClose = true;

Impostando questa opzione sul valore true, sarà possibile chiudere la finestra popup con un semplice click sull'immagine.

iPop.CloseOpenWindows = true;

Usando il valore true per quest'ultima opzione faremo sì che una popup già aperta si chiuda automaticamente quando se ne apre un'altra. Ottimo nelle gallerie per evitare che l'utente si ritrovi ben presto una decina di popup flottanti sullo schermo.

Una nota di compatibilità. Queste ultime due funzionalità non sembrano funzionare su Safari, il browser di Apple.

Subito dopo queste tre opzioni, una sezione dedicata alla personalizzazione dei messaggi che appaiono sotto forma di title o nella popup. Li abbiamo tradotti in italiano, ma possono ovviamente essere personalizzati a piacimento.

Ma veniamo alla pratica, iniziando con un esempio di base che usa una sola immagine. L'implementazione è di una semplicità disarmante.

Nella sezione <head></head> provvederemo a inserire nella pagina lo script ipop.js:

Nel corpo piazzeremo una thumbnail e creeremo il link all'immagine ingrandita, aggiungendo un evento onclick per attivare l'apertura della popup:

Fatto. Esempio finito e funzionante. Possiamo concludere con una piccola nota. Non è detto che il link per aprire l'immagine ingrandita debba essere associato ad una thumbnail. Può tranquillamente essere del semplice testo:

<a href="acqua.jpg" onclick="return iPop(this.href)">Clicca per aprire la popup</a>

Pagina successiva

Pagine: