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:
<script src="ipop.js" type="text/javascript"></script>
Nel corpo piazzeremo una thumbnail e creeremo il link all'immagine ingrandita, aggiungendo un evento onclick per attivare l'apertura della popup:
<a href="acqua.jpg" onclick="return iPop(this.href)"><img src="acqua_th.jpg" alt="Immagine" /></a>
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>
Galleria
È chiaro che uno script come iPop dà il meglio di sé in applicazioni come gallerie di immagini. Un esempio ridotto ma comunque utile al nostro scopo è questo.
In casi come questo torna utilissima un'estensione dello script: AutoApply.
Nel realizzare una galleria seguendo i passi visti nel primo esempio, si dovrebbe aggiungere l'evento onclick="return iPop(this.href)" a tutte le thumbnail. Complicato e poco funzionale. Il codice sarebbe questo:
<a href="acqua.jpg" onclick="return iPop(this.href)"><img src="acqua_th.jpg" alt="Immagine" /></a>
<a href="aria.jpg" onclick="return iPop(this.href)"><img src="aria_th.jpg" alt="Immagine" /></a>
<a href="fuoco.jpg" onclick="return iPop(this.href)"><img src="fuoco_th.jpg" alt="Immagine" /></a>
Da moltiplicare per il numero di immagini che compongono la galleria.
Con la funzione AutoApply possiamo evitare tutto ciò. Sarà lo script ad assegnare automaticamente l'onclick a tutti i link associati ad un'immagine presenti nella pagina.
Il codice HTML sarà dunque questo, senza onclick:
<p><a href="acqua.jpg" title="Acqua"><img src="acqua_th.jpg" alt="Immagine" /></a></p>
<p><a href="aria.jpg" title="Aria"><img src="aria_th.jpg" alt="Immagine" /></a></p>
<p><a href="fuoco.jpg" title="Fuoco"><img src="fuoco_th.jpg" alt="Immagine" /></a></p>
Per inserire l'AutoApply dovremo richiamare la funzione. Nell'esempio avviene con l'evento onload associato al tag <body>:
<body onload="iPop.AutoApply();">
Anche questo esempio è ora perfettamente funzionante.
C'è però un evidente problema con questo approccio. Lo script opera infatti su tutti i link associati ad un'immagine, per cui il rischio è che venga applicato anche ad immagini che non sono parte della galleria. La soluzione è a portata di mano, semplice semplice. Ecco l'ultimo esempio.
Basta racchiudere le immagini all'interno di un div identificato con id:
<div id="galleria">
<p><a href="acqua.jpg" title="Acqua"><img src="acqua_th.jpg" alt="Immagine" /></a></p>
<p><a href="aria.jpg" title="Aria"><img src="aria_th.jpg" alt="Immagine" /></a></p>
<p><a href="fuoco.jpg" title="Fuoco"><img src="fuoco_th.jpg" alt="Immagine" /></a></p>
</div>
Poi, richiamando AutoApply, passeremo come parametro l'id del div. In questo caso il richiamo della funzione avviene usando questo codice all'interno della sezione <head>:
<script type="text/javascript">
onload = function() {
iPop.AutoApply(document.getElementById('galleria') );
}
</script>
Per mostrare come in questo modo lo script si applica solo alle immagini contenute in una specifica sezione, abbiamo aggiunto un'immagine extra che non si aprirà nella popup.
