Fw

Wordpress Creative Developer

Tutorial Jquery: Slideshow di Immagini Con SexyCycle

  • Tutorial Jquery
  • -

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.

Sexy Cycle - Slideshow di immagini

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:

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

4 Commenti

  1. Ciao Fede, complimenti per il tuo blog, veramente “pieno zeppo” di fantasie, volevo un aiuto proprio per SexyCycle. Google chrome non lo legge, e appunto se avevi una sorta di variabile o qualcosa per modificarlo e farlo leggere anche a chrome. Un saluto e un grazie anticipatamente….!!!
    Claudio

  2. Ciao Claudio e benvenuto nel blog 😉

    Ti ringrazio per i complimenti! Che cosa intendi quando dici che Google Chrome non lo legge?

  3. ciao fede, avrei bisogno di un suggerimento: ho installato il plugin di sexycyle su wordpress, ma ho dei problemi a creare più gallerie di immagini nella stessa pagina perché wordpress crea una galleria unica per tutte le immagini (io ho bisogno che siano divise). Ho provato a usare nextgallery, ma non funziona con sexycycle. Puoi aiutarmi?? Ti ringrazio molto e complimenti vivissimi per il tuo blog!!!
    edoardo

  4. Ciao Edo.

    Nextgen Gallery purtroppo va in conflitto con diversi plugin, e anche a me è capito in un recente progetto. La soluzione è stata quella di inserire lo slide a manina senza l’utilizzo del plugin. Se trovi una soluzione migliore, mi raccomando dimmela! 😉

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *