Effetto zoom su immagini con Zoomy

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

CONDIVIDI
ARTICOLI CORRELATI
Lascia un commento

Captcha - risolvi l\'operazione per inviare il commento * Time limit is exhausted. Please reload CAPTCHA.