Zoomy è il modo più semplice per creare un effetto zoom sulle immagini grazie a jQuery.
Avremo bisogno soltando di due immagini: una normale, che visualizzaremo a video ed una più grande per creare l’effetto zoom.
Zoomy - Creare un effetto zoom
Zoomy viene fornito con diverse opzioni come: la dimensione del cerchio di zoom, se si desiderea un cerchio o un quadreato, il riflesso allo zomm e tanto ancora!!
Ma vediamo come è possibile implementarlo sul nostro sito in modo velocissimo:
1. PREPARAZIONE
Prima di tutto scarichiamo lo script dal sito, una volta aver scompattato l’archivio avremo una cartella con tutto ciò che ci servirà.
2. CODICE
Colleghiamo il file zoomy.css nella <head>
[css]<link type="text/css" rel="stylesheet" href="zoomy0.5.css" />[/css]
Successivamente colleghiamo i file javascript (anche nel <body>)
[code lang=”js”]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="jquery.zoomy0.5.min.js"></script>
[/code]
Inseriamo ora il collegamento ad un’immagine in questo modo:
[code]
<a class="zoom" href="lucyZoom.jpg"><img src="lucyTn.jpg" /></a>
[/code]
N.B.: Assicuratevi che il collegamento abbia la classe class=”zoom”. Notiamo inoltre che il collegamento punta all’immagine più grande.
3. AGGIUNGIAMO ZOOMY
Ora aggiungiamo il codice di zoomy.
[code]
<script type="text/javascript">
$(function(){
$(‘.zoom’).zoomy();
});
</script>
[/code]
Il mio consiglio è di inserire questo codice subito dopo il collegamento agli altri due file .js
Come ho già detto sopra, Zoomy permette diverse opzioni e personalizzazioni, ma per saperne di più vi rimando alla documentazione originale che sito trova sul sito ufficiale.