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.