Zoomy v2.0 alternativa al lightbox.
Ho apportato numerose migliorie al mio script per l'apertura di ingrandimenti di immagini, un semplice lightbox leggero leggero. Perchè utilizzare uno script da almeno 30 kb quando con soli 4kb si può ottenere un effetto ugualmente gradevole? In fondo mi sono un po' inspirato alle vecchie e odiose popup, che a mio modo di vedere costituiscono le antenate dei Lightbox dell'era web 2.0. Ricordo con affetto quei tempi quando con una riga di codice javascript si aprivano finestre a josa alla faccia degli utenti...
Tornando a Zoomy, la modifica principale riguarda il markup html, e in particolare l'adozione di 2 immagini per l'effetto (miniatura e ingrandimento): lo script precedente utilizzava solo l'immagine grande e una tecnica css di image replacement con overflow e text-indent che rendevano il codice non molto semantico riguardo ai suoi scopi.
Inoltre, allo scopo di precaricare le immagini, ho aggiunto la funzione imgPreloader, che ha anche contribuito alla rimozione di alcuni fastidiosi bug nel dimensionamento e posizionamento dello zoom, che ora sono più precisi.
Mi sarei ripromesso di implementare un diverso effetto di apparizione / scomparsa, e un indicatore di caricamento, ma al momento non se ne parla, sono molto impegnato nel lavoro e in progetti personal-lavorativi (la creazione di una newsletter avanzata e di un player per playlist di MP3 in Ajax senza l'uso di flash.
link: zoomy.js v2.0
Aggiornamento 27/01/2009 - con una piccola modifica al codice viene cambiata l'opacità delle thumbs cliccate.
- Social:
Commenti
2) 14 gennaio 2009 - inserito da Mr Jonathan Insell
3) 21 maggio 2009 - inserito da Filippo Buratti
4) 24 agosto 2009 - inserito da Kirill Morozov
5) 23 aprile 2010 - inserito da Bart Stroeken
This is a fabulous - and astonishingly simple - script.
I do have one suggestion: fire a custom event after the popup has opened, so you can append your own actions, like repositioning the thumbnails for example, by listening to that event.
Simple: add Event.fire(this.element, 'zoomin'); to the setZoom-method :-)
You can even add Event.fire(this.element,'zoomout'); to the hideZoom-method.
Thanks for this script, and keep it up!
L'html nel testo del commento è abilitato: i tag consentiti sono: a, em, strong, p, code, pre, quote e br.
Gli attributi dei tag utilizzabili sono title e href.
1) 18 dicembre 2008 - inserito da zil