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.