javascript, jQuery

Zoomy: come zoomare immagini sui siti web

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.

Potrebbero Interessarti

  • Cloud Zoom: image zoomer con jQuery31 Maggio 2010 Cloud Zoom: image zoomer con jQuery Cloud Zoom è un plugin jQuery, di peso leggero, che permette di creare un effetto zoom sulle immagini nelle vostre pagine web. E' altamente personalizzabile con diverse caratteristiche come l'effetto tinta, zoom interno o un sottile effetto di focus, e soprattutto è cross-browser, […]
  • Lightbox plugin con jQuery1 Luglio 2008 Lightbox plugin con jQuery Inizio con un primo articolo su un plugin per jQuery alternativo alla famosissima Lightbox JS di Lokesh Dhakar. Questo plugin, semplice e facile da usare è una creazione di Leandro Vieira Pinho, per utilizzarlo è necessario scaricare la libreria jQuery e il plugin alla pagina […]
  • jQuery Captify Plugin: Aggiungere didascalie alle immagini15 Dicembre 2009 jQuery Captify Plugin: Aggiungere didascalie alle immagini Captify è un plugin jQuery in grado di visualizzare le didascalie delle immagini in modo alternativo al semplice rollover. Funzionante in tutti i principali browser: Firefox, Chrome, Safari, Opera e tutte le versioni di Internet Explore. Quello che differenzia Captify da tutti […]
  • Crea tooltip su link e immagini in modo semplice con jQuery16 Dicembre 2009 Crea tooltip su link e immagini in modo semplice con jQuery Sticky Tooltip è un plugin jQuery che permette di aggiungere un tooltip, azione di passaggio del mouse sopra l'elemento, contenente ulteriore codice HTML. In generale il tooltip segue il cursore che si muove sull'area occupata dall'elemento, una caratteristica importante di […]

Potrebbero interessarti

  • 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 …

    31 Gennaio 2011

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.