General Purpose

Thumbnail Viewer scritti in Javascript ne esistono tantissimi, ma di tutti quelli che ho provato nessuno usa solo il DOM (da qualche parte compare sempre un bel document.write) e quindi nessuno funziona nel caso la pagina venga servita con Content-type: application/xhtml+xml. Vista questa mancanza ne ho scritto uno io ed in questo post vi spiegherò come utilizzarlo. Aveghe Thumbnail Viewer è semplicissimo da usare ed è compatibile con tutti i browser standard compliant. Per quanto riguarda MS Internet Explorer è supportata solo la versione 8, l'ultima, mentre tutte le versioni precedenti sono UFFICIALMENTE NON SUPPORTATE.

Fatte queste doverose premesse, vediamo come usare Aveghe Thumbnail Viewer. Il codice XHTML è molto semplice. Per esempio supponiamo di voler visualizzare l'immagine dal nome caneMatto.jpg la cui è thumbnail caneMatto-thumb.jpg. Il codice da scrivere è il seguente:

<a href="caneMatto.jpg"
   rel="thumbnail"
   ><img src="caneMatto-thumb.jpg"
         width="64"
         height="64"
         alt="La foto di un cane matto" /></a>

Notate l'attributo rel nel tag a. Ora basta richiamare lo script Aveghe Thumbnail Viewer scrivendo prima della chiusura del tag body il seguente codice:

  ...
  <!--[if gte IE 8]>-->
  <script type="text/javascript"
          src="js/AvegheThumbnailViewer.js"></script>
  <!--<![endif]-->
</body>

Ecco fatto. In pratica basta che ogni thumbnail sia racchiusa in un tag a con attributo rel="thumbnail".

Ecco un esempio di Aveghe Thumbnail Viewer in azione: cliccate sull' immagine per vederla in formato grande.

Aveghe Thumbnail Viewer è rilasciato sotto licenza GPL 2.0 e potete scaricarlo ed usarlo liberamente nei vostri siti.