Zoomy è un plugin jQuery molto semplice da implementare che permette di effettuare l’effetto zoom sulle immagine del nostro sito web.

Per funzionare, oltre alle miniature, Zoomy richiede un formato più grande delle stesse immagini per visualizzare la parte ingrandita nell’effetto zoom.

Poche le opzioni del plugin che possiamo inizializzare per modificare l’aspetto e la fruibilità: dimensione dello zoom, angolo arrotondati dell’effetto lente e se l’immagine può essere cliccabile o meno, in modo da utilizzare Zoomy in combinazione con un plugin lightbox.

Il funzionamento è un concetto semplice. Zoomy aggiunge solo due oggetti al documento, uno che contiene l’immagine ingrandita e un altro opzionale per l’effetto sfondo sfumato con CSS3. Un caricatore visualizzato durante l’attesa per lo zoom dell’immagine.

Come dicevo all’inizio dell’articolo, è molto semplice farlo funzionare. Bisogna collegare alla nostra pagina HTML, oltre alla libreria jQuery, il plugin e il suo foglio di stile. Aggiungere il frammento di codice per avviare e inizializzare Zoomy e, per applicare l’effetto zoom ad un immagine del documento, includere il tag immagine, della miniatura, all’interno di un link con collegamento all’immagine ingrandita:
[html href=”zoomImg.jpg” 1=”class="zoom">” 2=”<img” src=”displayImg.jpg” alt=”Maniatura immagine visualizzata” 3=”/>” 4=”</a>” 5=”[/html” language=”<a”][/html]

Per la visualizzazione degli esempi e il download di Zoomy, è presente la pagina dedicata al plugin.