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.

In XHTML 1.0 Strict il tag a non prevede più l'attributo target. Le motivazioni di tale eliminazione sono da ricercarsi principalmente nell'ambito della User Experience. In particolare, la maggior parte degli utenti si confonde quando si aprono troppe finestre, non desiderate tra l'altro, sul desktop: il problema è stato affrontato anche dalle WCAG 2.0. Questo problema è stato in parte attenuato anche dai browser stessi introducendo la navigazione a schede (tab) permettendo all'utente di avere più pagine aperte nella stessa finestra.

A volte comunque potrebbe essere più usabile visualizzare una risorsa in un'altra finestra (tab). Per poter ottenere l'apertura di nuova finestra (tab) è necessario usare JavaScript, naturalmente facendone un uso saggio e rispettoso delle linee guida per l'accessibilità.

Vediamo come si fa.

Prima di tutto il codice XHTML 1.0 Strict:

<a href="http://w3.org"
   hreflang="en-US"
   onclick="return openNewWindow('http://w3.org')"
>Testo link</a>

Ora non resta che richiamare il file dov'è definita la funzione openNewWindow. Per farlo basta inserire prima della chiusura del tag body il seguente codice:

  ...
  <script type="text/javascript" src="js/newWindow.js"></script>
</body>

Il codice della openNewWindow è molto semplice:

function openNewWindow(link)
	{
		window.open(link, '', '');
		return false;
	}

Anche nel caso l'utente abbia JavaScript disabilitato il link sarà visualizzabile, naturalmente senza aprire una nuova finestra.

Scarica il codice completo