plugin page

livedemo

Questo plugin permette di costruire un navigatore in stile photoshop su di una miniatura, caricando in maniera asincrona l’immagine originale in fullsize. E’ ideale per immagini macro, panoramiche, o per mappe statiche.

La versione attuale (0.5) si trova ancora in fase di beta, come al solito ogni segnalazione di errori o suggerimenti d’implementazione è ben accetta.

Come funziona

Molto banalmente, basta inserire la miniatura nel proprio html, settarne uno pseudo attributo fullsize con il percorso dell’immagine originale, ed eseguire il metodo .magnifier() su di essa.
fullsize, non è un attributo html standard, e probabilmente non lo diverrà mai, ma è semanticamente espressivo, e se non facciamo troppa attenzione alla validazione della nostra pagina web, tanto basta.

Per default il plugin aggiunge il contenitore dell’immagine originale direttamente nel parent del contenitore della miniatura, settandone le dimensioni a 4 volte la miniatura stessa.
Ovviamente questo comportamento è configurabile tramite parametri, descritti estensivamente nella pagina ufficiale del plugin.

HTML:

<img src="miniature.jpg" fullsize="fullsize.jpg" alt="navigator" />

JS, parametri di default:

$("img[fullsize]").magnifier();

Posizioniamo invece la miniatura in alto a destra, e modifichiamo il messaggio di attesa:

$("img[fullsize]").magnifier({
    position: "top-right",
    loadingMessage: "Caricamento in corso..."
});

Compatibilità

E’ stato testato correttamente con Firefox 3.0.x, Opera, Safari, Chrome, e IE6/IE7.