Zoomy è un semplice plugin sviluppato in jQuery che permette di zoomare una qualsiasi immagini con un simpatico effetto lente.
Per implementare questo zoom avrete bisogno della stessa immagine in due dimensioni differenti: una scalata e rimpicciolita per il web e l’altra a risoluzione maggiore.
Una volta installato il plugin basterà passare il mouse sopra la foto in pagina per far comparire una lente di ingrandimento che permetterà di zoomare l’immagine stessa.
Per utilizzare Zoomy è sufficiente caricare nel documento il file zoomy.css e il plugin stesso (jquery.zoomy0.5.min.js o jquery.zoomy0.5.js)
<link type="text/css" rel="stylesheet" href="percorso/zoom.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script type="text/javascript" src="percorso/jquery.zoomy0.5.min.js."></script>
A questo punto basterà inserire l’immagine sulla quale effettuare lo zoom
<a href="zoomImg.jpg" class="zoom">
<img src="displayImg.jpg" alt="immagine da zoomare" />
</a>
e chiamare con il JavaScript la funzione di zoom
$(function(){
$('.zoom').zoomy();
})(jQuery)
E’ possibile settare alcune variabili per modificare l’aspetto dello zoom
Size: la dimensione della lente di ingrandimento
Round: specifica se la lente è rotonda o quadrata
Glare: abilita o disabilita l’effetto bagliore sul vetro della lente
Il plugin è scaricabile gratuitamente da qui
