Come ogni lunedì appuntamento con i tutorial. Oggi vediamo in particolare come realizzare uno slideshow di immagini sfruttando la libreria jquery.

Si tratta di Sexy Cycle, script altamente personalizzabile da poter integrare nel tuo sito in modo da dargli della dinamicità alla pagina che coinvolga maggiormente l’utente nella navigazione.

Prima di vedere come utilizzare lo script, guarda la live demo per capire di cosa si tratta.

Ora è venuto il momento di capire come ottenere questi effetti.

Passo Preliminare

Prima di passare a scrivere il codice per ottenere l’effetto, è necessario che:

• ti procuri delle immagini, e mettile in una cartella chiamata ad esempio “img”;
• scarichi i file necessari

Passo 1 – Inizializzazione degli script

Come per tutti gli script, la prima cosa è da fare è quella di inizializzarli, inserendo tra i tag head le seguenti righe di codice.

Passo 2 – Creazione div dove inserire le immagini

Ora, tra i tag body dobbiamo inserire un div (cioè una “scatola”), dove mettere le immagini che faranno parte dello slideshow, in questo modo.

Passo 3 – Applicare Sexycycle al div “box”

Come ultimo passo bisogna applicare lo script Sexycycle al div contenente le immagini.

Passo 4 – Personalizzazione

L’effetto può essere personalizzato, aggiungendo i seguenti parametri:

• easing: permette di impostare il tipo di effetto, che può essere ‘easeInOutBounce’, oppure ‘easeOutElastic’;
• speed: serve per impostare la velocità dell’effetto;
• cycle: permette di ricominciare da capo o meno lo slide (true o false);
• start: permette di decidere da quale immagine iniziare, partendo dallo 0 in su;
• next e prev: aggiungono i pulsanti next e prev per poter interagire con lo slideshow
• interval: impostando questo valore, permette lo slideshow automatico delle immagini

Ecco un esempio di codice con tutti i parametri elencati.

$("#box0").sexyCycle({
        speed: 1000,
        next: '.next',
        prev: '.prev',
        stop: '.stop',
        cycle: false,
        start: 2,
        interval: 2000

	});

Ricordo che lo script funziona perfettamente in tutti i browser, compreso l’odiato internet explorer 6.

Guarda l’esempio

Scarica l’esempio

Ti è piaciuto l'articolo? Se non vuoi rischiare di perderti i prossimi articoli tieniti aggiornato con i feed RSS o seguimi su twitter e facebook!

Se non sai cosa sono, guarda questo video Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

Javascript Vs Flash: The Winner Is..

Javascript! Ormai slideshow, menu e testi animati, e molto altro ancora si possono tranquillamente realizzare con javascript, con il vantaggio di...

Tutorial Javascript – Realizzare Una Textarea Dinamica

Oggi vediamo un semplice ed efficace tutorial su javascript, dove realizzeremo una textarea dinamica, le cui dimensioni si adatteranno al testo che...

Tutorial Javascript: Prima e Dopo..

A volte ci può essere l'esigenza di mostrare l'evoluzione di un ritocco fotografico, di una donna con e senza trucco, e più in generale di far...