jQuery Zoomooz è un plugin di jQuery che consente di zoomare un elemento o un’intera pagina web.

Zoomooz è compatibile con tutti i browser moderni ed è rilasciato con duplice licenza MIT e GPL.

Come funziona

Nel primo esempio jQuery Zoomooz viene applicato ad alcune immagini presenti in un documento. Per attivare lo zoom è sufficiente fare clic sull’immagine.

<!DOCTYPE HTML>
<html lang="it">
<head>
<meta charset="utf-8">
<title>jQuery Zoomoz (1) | Sintesi-Design.it</title>
</head>
<body>
    <p>Lorem ipsum dolor sit ...</p> 
    <img src="images/1.png" width="120" height="80" class="zoomTarget">
    <p>Aliquam vehicula ultricies ...</p> 
    <img src="images/2.png" width="120" height="80" class="zoomTarget">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.zoomooz.min.js"></script>
</body>
</html>

Usare jQuery Zoomooz è molto semplice:

  1. Includere una copia di jQuery e di Zoomooz in fondo al documento
  2. Assegnare la classe zoomTarget all’elemento a cui si desidera applicare il plugin, nell’esempio una serie di immagini

Il plugin è controllato dalla classe zoomTarget e non è necessario, anche se è possibile, utilizzare delle istruzioni jQuery.

Le immagini usate negli esempi sono più grandi di quanto dichiarato negli elementi img così da migliorare la qualità l’immagine quando viene ingrandita.

Controllare Zoomooz

Il comportamento del plugin può essere controllato attraverso una serie di opzioni che possono essere applicate agli elementi con una serie di attributi data-.

<!DOCTYPE HTML>
<html lang="it">
<head>
<meta charset="utf-8">
<title>jQuery Zoomoz (1) | Sintesi-Design.it</title>
</head>
<body>
<p>Lorem ipsum dolor sit ...</p> 
<img src="images/1.png" width="120" height="80" class="zoomTarget" data-targetsize="0.50" data-closeclick="true">
<p>Aliquam vehicula ultricies ...</p> 
<img src="images/2.png" width="120" height="80" class="zoomTarget" data-targetsize="0.50" data-closeclick="true">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.zoomooz.min.js"></script>
</body>
</html>

Nell’esempio, l’attributo data-targetsize controlla il fattore d’ingrandimento mentre l’attributo data-closeclick con il valore true ripristina le dimensioni iniziali dell’elemento.

La lista completa delle opzioni è disponibile nel sito ufficiale di jQuery Zoomooz.