Corsi on-line

Image zoom in JavaScript con Zooming

Zooming è una piccola libreria Open Source scritta in linguaggio JavaScript che consente di applicare degli effetti di zoom sulle immagini, dal semplice ingrandimento ad alcuni comportamenti più complessi. Si potranno per esempio definire i parametri relativi a larghezza e altezza dell’immagine da zoomare, utilizzare esclusivamente miniature (modalità thumbnails only) o creare zoom basati su immagini ad alta risoluzione aperte tramite click sulle miniature.zoomingA livello di user experience le fasi di zoom potranno essere gestite in modo tradizionale con il solo supporto di JavaScript, senza la necessità di ricorrere a framework di terze parti o dipendenze aggiuntive:

  • un click consentirà di visualizzare l’immagine zoomata;
  • il trascinamento dell’immagine consentirà di accedere ad un livello di zoom più elevato;
  • interrompendo il trascinamento si tornerà all’immagine originale (in stile Instagram);
  • cliccando sull’immagine zoomata la si potrà chiudere per visualizzare nuovamente il file originale;
  • se disponibile si potrà aprire anche l’immagine in alta risoluzione.

Per utilizzare Zooming lo si potrà installare tramite npm o bower, a seconda del proprio gestore di pacchetti di riferimento:

npm install zooming --save
bower install zooming --save

Fatto questo l’utilizzatore avrà la possibilità di caricare la libreria tramite Browserify:

var Zooming = require('zooming')

o procedere con la sua inclusione tra gli script tags. Si potrà quindi definire una qualsiasi immagine come zoomabile:

<img src="img/file.jpg" data-action="zoom" />

Come è possibile notare tale procedura si basa sull’utilizzo dell’attributo personalizzabile data-* di HTML5, che in questo caso diventa data-action, a cui viene passato il valore zoom. Nel caso in cui invece si voglia lavorare con immagini ad alta risoluzione si dovrà far ricorso all’attributo data-original introducendolo in questo modo:

<img src="img/miniatura.jpg" data-action="zoom" data-original="img/file.jpg" />

Chiaramente sarà possibile automatizzare l’indicazione di tali attributi utilizzando un linguaggio server side, come per esempio PHP, che prelevi le immagini da zoomare da una cartella o da un’altra sorgente di dati come per esempio un database; si potrà inoltre applicare un’azione di zoom a tutti gli elementi associati ad un selettore, tale operazione sarà possibile intervenendo direttamente su JavaScript:

Zooming.listen('.selector')

Via Zooming

Post correlati
I più letti del mese
Tematiche