Oggi vorrei presentarvi questo plugin, jQuery Magnifier.

Questo plugin permette lo zoom dell’immagine con un semplice effetto lente.

Di seguito una mini-guida all’installazione e all’uso.

Installazione

Aggiungete la libreria jQuery nell’head della pagina :

<script type=”text/javascript” src=”js/jquery-1.3.2.min.js“></script>

Ora aggiungete nell’head anche il file javascript del plugin :

<script type=”text/javascript” src=”js/jquery.magnifier.0.2.js“></script>

ed anche il file css del plugin :

<link rel=”stylesheet” type=”text/css” href=”css/jquery.magnifier.css” media=”screen”>

Come utilizzarlo

Ora abbiamo bisogno di due immagini uguali, una più grande ed una più piccola sulla quale fare lo zoom :

<a href=”img/large.jpg” rel=”magnify”>
<img src=”img/small.jpg alt=”My small image” width=”500″ height=”335″>
</a>

nel link all’immagine più grande bisogna inserire il tag rel=”magnify” per far funzionare lo script.

Ora bisogna inserire il codice javascript per far funzionare lo zoom con la lente :

jQuery(function($) {
$(‘a[rel*=magnify]‘).magnify();
});

Se si vogliono aggiungere delle opzioni, per adattare lo zoom come vogliamo noi basta inserire le opzioni nella funzion magnify(), così :

jQuery(function($){
$(‘a[rel*=magnify]‘).magnify({
lensWidth: 160, // width of the lens
lensHeight: 160, // height of the lens
link: true // clicking in the lens goes to the large image
delay: 500 // time to wait before the lens is shown
});
});

Le opzioni lensWidth e lensHeight indicano rispettivamente larghezza ed altezza dello zoom, l’opzione link : true invece inserisce il link all’immagine a quella più grande.

L’ultima opzione, il delay vuole il numero di millisecondi prima di visualizzare la lente.

Potete scaricare questo plugin qui.