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

L'articolo ti è stato utile? se vuoi ringraziarmi offrimi un caffè, o una pizza se vuoi esagerare!

E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.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

Tutorial Jquery – Uno Bellissimo Slideshow Di Foto Originale

Appuntamento con i tutorial su jquery, dove andremo a vedere uno bellissimo slideshow di foto dove potrai realizzare effetti di transizione davvero...

Tutorial Jquery – Slideshow Di Foto Come Sfondo Del Sito

Uno dei trend del momento è l’utilizzo di immagini grandi come sfondo nel sito. In questo modo si vuol dare forte risalto alle immagini, suscitando...

Tutorial Jquery – Bellissime Gallery Di Foto in 5 Minuti

Per la serie di tutorial e risorse su javascript, oggi ti segnalo jPhotoGrid, un fantastico plugin jquery che ti permetterà di realizzare gallerie...