Oggi vorrei parlarvi di jQZoom Evolution, un plugin jquery che permette lo zoom di un immagine più grande attraverso una sorta di “lente” su un immagine di anteprima.

Qui troverete alcuni esempi del funzionamento di jqzoom, e se continuate a leggere vi spiegherò come utilizzare il plugin.

Installazione

Il plugin necessita per prima cosa di jQuery , quindi scaricate la libreria ed inserite il collegamento all’interno dell’head della pagina html.

<script type=’text/javascript’ src=’js/jquery-1.2.6.js’></script>

Ora scaricate dalla pagina del progetto i file necessari per far funzionare il plugin ed aggiungete nell’head della pagina il riferimento alla pagina javascript.

<script type=’text/javascript’ src=’js/jquery.jqzoom-1.0.1.js’></script>

All’interno del pacchetto zip che scaricherete troverete anche il file css per lo stile del plugin, aggiungetelo sempre nell’head della pagina.

<link rel=”stylesheet” type=”text/css” href=”css/jqzoom.css” />

Come utilizzarlo

jQZoom necessita di due immagini, una più grande ed una più piccola. Quest’ultima, al passaggio della lente visualizzerà lo zoom dell’immagine più grande, quindi per il corretto funzionamento è consigliabile usare due immagini con le medesime proporzioni ( altezza – larghezza).

Di seguito il codice html per le immagini :

<a href=”images/BIGIMAGE.JPG” title=”MYTITLE”>
<img src=”images/SMALLIMAGE.JPG” title=”IMAGE TITLE” >
</a>

SMALLIMAGE rappresenta l’immagine che vogliamo zoomare mentre BIGIMAGE è l’immagine sulla quale sarà effettuato lo zoom vero e proprio.

Adesso, come è consuetudine per jQuery, dichiariamo all’interno del caricamento del DOM la funzione jqzoom() sulla classe di prima (MYCLASS), così :

$(document).ready(function(){
$(‘.MYCLASS).jqzoom();
});

Se si vuole si possono inserire alcune opzioni all’interno della funzione per adattare il plugin alle proprie esigenze, vediamo un esempio :

$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: “right” //and MORE OPTIONS
};
$(‘.MYCLASS).jqzoom(options);
});

Le opzioni sono molte, di seguito un elenco e una descrizione di cosa attuano :

• zoomType : ['standard','reverse'] ; questa è la variabile che decide se lo zoom è di tipo standard o reverse.
• zoomWidth : valore ; questo valore indica la larghezza del box con lo zoom
• zoomHeight : valore ; questo valore indica l’altezza del box con lo zoom
• xOffset : valore ; questo valore indica la posizione iniziale x della lente
• yOffset : valore ; questo valore indica la posizione iniziale y della lente
• position : ['right','left','top','bottom'] ; indica la posizione del box con lo zoom
• lens : ['true','false'] ; indica se si vedrà la lente oppure no
• imageOpacity : valore decimale ; indica l’opacità che assumerà l’immagine con lo zoomType settato a reverse
• title : ['true','false'] ; indica se si vedrà il titolo soprà il box con lo zoom
• showEffect : ['show','fadeIn'] ; indica con quale effetto si visualizzerà il box con lo zoom
• hideEffect : ['hide','fadeOut'] ; indica con quale effetto si nasconderà il box con lo zoom
• fadeInSpeed : ['fast','slow','medium'] ; indica la velocità di apparizione del box se showEffect è settato su fadeIn
• fadeOutSpeed : ['fast','slow','medium'] ; indica la velocità di scomparsa del box se hideEffect è settato su fadeOut
• showPreload : ['true','false'] ; indica se si vedrà il preload del plugin oppure no
• preloadText : ‘valore’ ; indica il testo da visualizzare durante il preloading
• preloadPosition : ['center','bycss'] ; indica la posizione che occupa il preload, se al centro o se settato nel css

Ulteriori modifiche di stile (colori,font,ecc.) avvengono nel file jqzoom.css.

Il plugin potete scaricarlo qui.

Un ringraziamento va all’autore Ing. Marco Renzi, che ha creato questa perla di plugin.