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.
Iscriviti al feed di Good2know