Corsi on-line

Viewer.js: un visualizzatore di immagini in JavaScript

Viewer.js è un JavaScript image viewer, si tratta di un visualizzatore di immagini rilasciato sotto licenza Open Source pronto per l’integrazione all’interno delle pagine di una sito Internet o in una Web application. Le features a disposizione rendono questo strumento adatto all’utilizzo tramite touchscreen, sono poi supportate funzionalità appositamente dedicate alla manipolazione dei contenuti grafici come per esempio lo zoom, la rotazione e il ridimensionamento.

javascript_logoLa navigazione tra le immagini tramite Viewer.js sarà resa più semplice grazie alla possibilità di utilizzare scorciatoie da tastiera, le frecce direzionali consentiranno di spostarsi rapidamente da un file all’altro o di zoomare il contenuto corrente, così come la barra spaziatrice permetterà di arrestare la riproduzione degli slider e le combinazioni di [Ctrl] con [+] e [-] potranno essere utilizzate per riportare le dimensioni al loro livello iniziale e naturale dopo lo zoom. Supportata anche la modalità Full Screen dalla quale si potrà uscire tramite [Esc].

Si tratta di una libreria distribuita sia come soluzione standalone che come plugin per il framework JavaScript jQuery; l’installazione è possibile sia attraverso il download dei file necessari da GitHub che per clonazione via Git; in alternativa vi sarà la possibilità di acquisire Viewer.js come modulo di Node.JS (come package NPM) o tramite il gestore di pacchetti Bower. L’utilizzo è estremamente semplice e prevede innanzitutto l’inclusione del file JavaScript del progetto e del foglio di stile CSS associato.

<link href="/nome/directory/viewer.css" rel="stylesheet">
<script src="/nome/directory/viewer.js"></script>

Fatto questo si dovrà definire un comune container HTML, classicamente una divbox, all’interno del quale includere le immagini da visualizzare che, ovviamente, potranno essere elencate direttamente nel markup o prelevate da una sorgente di dati come per esempio un database.

<div>
  <img id="image" src="img.jpg" alt="Immagine">
</div>

<div>
<ul id="images">
<li><img src="img.jpg" alt="Immagine"></li>
<li><img src="img2.jpg" alt="Immagine 2"></li>
<li><img src="img3.jpg" alt="Immagine 3"></li>
</ul>
</div>

A questo punto non si dovrà fare altro che richiamare il metodo Viewer che permetterà di visualizzare una o più immagini tra quelle disponibili:

// visualizzazione singola immagini
var viewer = new Viewer(document.getElementById('image'), options);

// visualizzazione immagini multiple
var viewer = new Viewer(document.getElementById('images'), options);

Le opzioni che vengono fornite per la personalizzazione sono numerose, si potrà per esempio associare un pulsante a ciascuna immagine o un URL per il collegamento ad ulteriore risorsa, mettere a disposizione degli utilizzatori una toolbar per la navigazione, definire il massimo e il minimo livello di zoom e abilitare le transizioni di CSS3 per gli elementi gestiti.

Via Viewer.js

Post correlati
I più letti del mese
Tematiche