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.

plugin page

livedemo

Showcase è un plugin per jQuery che consente di costruire in maniera semplicissima un moderno slideshow per un set di immagini, consentendo un’ampia personalizzazione .

Edit 02/02/2010: versione 2.0! Tutto nuovo, date un’occhiata alla documentazione.
Edit 27/07/2009: rilasciata la versione 1.0, che implementa la creazione asincrona del set di immagini.

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

Come funziona

Edit 27/07/2009: Vedere le note di rilascio della versione 1.0.

Allo stato attuale il plugin richiede la presenza di un div contenente una serie di tag anchor contenenti a loro volta le immagini che si intende visualizzare. L’attributo alt dell’immagine, poi, viene utilizzato per visualizzare una descrizione dell’immagine.

Ipotizzando la presenza di un div con id showCase1, il metodo per attivare lo showcase è molto semplicemente:

$("#showCase1").showcase();

Nel caso si voglia personalizzare l’aspetto dello showcase sono previsti numerosi parametri (per una descrizione completa consultare la pagina ufficiale del plugin).

Se ad esempio volessimo utilizzare un effetto di slide verticale e numerare i pulsanti di navigazione:

$("#showCase1").showcase({
    animation: { type: "vertical-slider" },
    navigator: { showNumber: true }
});

Ancora, vogliamo che i pulsanti di navigazione compaiano nell’altro angolo dell’immagine, e che siano disposti verticalmente:

$("#showCase1").showcase({
    animation: { type: "vertical-slider" },
    navigator: { showNumber: true,
                     position: "top-left",
                     orientation: "vertical" }
});

Visualiziamo la miniatura delle immagini nei pulsanti di navigazione:

$("#showCase1").showcase({
    animation: { type: "vertical-slider" },
    navigator: { showNumber: true,
                     position: "top-left",
                     showMiniature: true,
                     orientation: "vertical",
                     item: { width: "64px", height: "48px" } }
});

Problemi noti

Il plugin si comporta correttamente con Firefox 3.0.x, Opera, Safari e Chrome, ma con IE6/IE7 si verificano (in maniera casuale, a quanto pare) dei problemi nel caricamento delle informazioni di dimesione delle immagini. Una possibile soluzione sarebbe quella di scolpire larghezza/altezza dello showcase in fase d’istanziazione, prevedendo un paio di parametri in più. Ma ciò non mi convince granchè.

Edit 26/05/2009:
Nella versione 0.5 il problema della lettura delle dimensioni dell’immagine sembra definitivamente risolto.

plugin page

livedemo

Si tratta di un plugin dalla dubbia utilità, ma altamente spettacolare, che consente di evidenziare tramite un’animazione uno o più elementi della pagina.

Potrebbe essere impiegato nell’evidenziazione degli elementi di una form validata, o chissà :)

Come funziona:

Il trucco consiste nel costruire dinamicamente un div che inizialmente ha la dimensione di un contenitore (di default il window) e che viene trasformato fino a boxare l’elemento indicato nel selettore; infine viene rimosso dal DOM.

Il metodo viene applicato banalmente:

$("#myDOMElement").seek();

E ci sono diversi aspetti customizzabili, attraverso i seguenti parametri:

• css (object): espone alcune proprietà CSS
  • backgroundColor, borderColor, borderStyle, borderWidth, position, top, bottom, right, left
• startFrom (jQuery object, default $(window)): indica l’elemento dal quale si esegue il morphing del div.
• animation (object): ciò che riguarda la trasformazione.
  • easeFunction (string, default “swing”): il tipo di funzione easing applicata alla trasformazione, per una raccolta fantastica di funzioni fare
    riferimento a http://gsgd.co.uk/sandbox/jquery/easing/
  • speed (int, default 500): il tempo, espresso in millisecondi, di durata della singola animazione.
• multiple (object): Se il selettore di partenza corrisponde a più elementi del DOM entrano in gioco le seguenti proprietà.
  • simultaneous (bool, default true): indica se l’animazione deve scattare simultaneamente per tutti gli elementi.
  • interval (int, default 800): il tempo, espresso in millisecondi, di intervallo tra l’animazione di un elemento e l’altro.

Compatibilità

jQuery.seek è stato testato con successo su IE6, IE7, Firefox 3.0.x, Safari 3&4, Opera 9.x e Google Chrome.

Contest

Il plugin può anche essere affascinante, ma lascia perplessi per quel che riguarda l’effettivo impiego.
Lanciamo quindi un piccolo contest: chi linkerà una pagina in cui si fa un uso creativo e funzionale del plugin vincerà… niente di che: una nota al merito nella pagina dei plugin di jQuery.

Happy seeking.

download plug-in

livedemo

jqPrint è un plug-in per jQuery che consente di stampare una pagina o una porzione di html partendo da un elemento o un selettore jQuery.

Si basa principalmente sul famoso jPrintArea, di cui abbiamo corretto alcune imperfezioni e a cui abbiamo aggiunto alcune comode funzioni.

Come funziona:

Tutto ciò che bisogna fare è selezionare un elemento jQuery o un selettore e invocare il metodo jqprint():

$("div.toPrint").jqprint();
// . . .
$divToPrint.jqprint();

Otterremo la finestra di dialogo del sistema per la stampa.

Di default il plug-in ricerca tra i CSS della pagina i file con l’attributo media='print' e li importa nel documento da stampare, ciò permette di separare nettamente la presentazione per la normale navigazione col browser e per la stampa.

Update 19/06/2009

Attualmente sono previsti i seguenti parametri:

• debug (bool, default false): permette di visualizzare in fondo al body il contenuto dell’iframe utilizzato per la stampa.
• importCSS (bool, default true): indica al plugin se importare il CSS (con media=’print’, se presente) o se eseguire una stampa grezza del documento.
• printContainer (bool, default true): indica al plugin se stampare anche l’html
  dell’elemento usato come selettore, se settato a false può causare dei problemi nell’applicazione delle regole css.
• operaSupport (bool, default true): attiva un support per la stampa in Opera, effettuando la stampa da un tab temporaneo.

Compatibilità

jqPrint è stato testato con successo con Firefox 3.0.x, IE6, IE7, Safari 3&4, Google Chrome e, dalla versione 0.3, anche in Opera.
Attualmente la stampa dei documenti fra i vari browser presenta alcune diversità. E’ anche completamente dipendente dal CSS. Potrebbe essere interessante capire se siano applicabili delle funzioni di normalizzazione del layout… vedremo con le future release.

Per il momento buona stampa!