immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Zoomy: come zoomare immagini sui siti web

di MaiNick | 31 Gen 2011 | jQuery | 1 Commento

Zoomy immagini con jQuery

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:

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

Tags: , ,

Un Commento

Trackbacks

  1. diggita.it ha detto:

    Come effettuare lo zoom alle immagini sui nostri siti web…

    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 …

Lascia un Commento

^ Torna su