Realizzare slideshow complessi con jquery cycle

jquerycycle

Tempo fa avevamo parlato di come realizzare un semplice slideshow con jquery, oggi vediamo come creare in poco tempo uno slideshow completamente customizzabile e compatibile grazie a jquery e jquery cycle.

Cos’è jquery cycle?

Jquery cycle è una libreria per jquery che permette la realizzazione di slideshow con molteplici effetti di transizione garantendo una buona customizzazione a livello funzionale tramite le opzioni messe a disposizione dagli sviluppatori.

Jquery cycle è scaricabile da qui.

Come funziona?

Per iniziare creiamo una pagina html ed inseririamo le immagini della nostra galleria all’interno di un div, al quale daremo delle regole css per dimensioni e stile.

<div id="photos">
<img src="images/sample1.jpg" alt="Questa è la prima foto"/>
<img src="images/sample2.jpg" alt="Questa è la seconda foto"/>
<img src="images/sample3.jpg" alt="Questa è la terza foto"/>
<img src="images/sample1.jpg" alt="Questa è la quarta foto"/>
<img src="images/sample2.jpg" alt="Questa è la quinta foto"/>
<img src="images/sample3.jpg" alt="Questa è la sesta foto"/>
<img src="images/sample1.jpg" alt="Questa è la settima foto"/>
</div>

Fatto questo colleghiamo la nostra pagina html alla libreria di jquery e al plugin di jquery cycle.

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery_cycle.js"></script>

(ovviamente i percorsi andranno definiti in base alla struttura della cartella)

A questo punto inseriamo la funzione cycle che farà funzionare il nostro slideshow

<script type="text/javascript">
$(document).ready(function() {
  $('#photos').cycle({
    fx:'fade',
    speed:  1000,
    timeout: 2000
  });
});
</script>

In questo codice applichiamo la funzione cycle al div #photos definendo un effetto di transizione fade, una velocità di transizione di un secondo (speed: 1000) ed un timeout di due secondi (timeout:2000).

Per vedere la demo clicca qui.

Come aggiungere le thumbnails delle immagini

Per aggiungere le thumbnails delle immagini possiamo utilizzare l’opzione pager per ottenere una paginazione numerica delle immagini e la funzione di callback pagerAnchorBuilder per sostituire i numeri alle rispettive thumbnails.

Creiamo quindi un div #thumbnails dove andremo a collocare le immagini

<div id="thumbnails"><ul></ul></div>

Aggiungiamo quindi l’opzione pager per dichiarare a jquery cycle dove desideriamo collocare le anteprime

$('#photos').cycle({
  fx:     'fade',
  speed:  1000,
  timeout: 2000,
  pager:  '#thumbnails ul',
});

Per alleggerire l’esecuzione di javascript ho preferito aggiungere manualmente i tag <ul></ul> ma è possibile aggiungere questi tag attraverso jquery nel funzione pagerAnchorBuilder che andiamo ad aggiungere.

$('#photos').cycle({
fx:     'fade',
speed:  1000,
timeout: 2000,
pager:  '#thumbnails ul',

pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#" title="Thumbnail"><img src="' + slide.src + '"/></a></li>';
}
});

La funzione pagerAnchorBuilder la normale paginazione di jquery cycle con le immagini contenute nello slide show.

Questo permette di visualizzare l’immagine scelta cliccando sulla thumbnail, viene inoltre messa a disposizione la classe .activeSlide presente sull’immagine attualmente visualizzata.

Questa soluzione molto comoda renderizza però due volte la stessa immagine, appesantendo notevolmente la pagina, in un contesto dinamico sarebbe opportuno gestire le thumbnails lato server per evitare ridimensionamenti da css che non riducono il peso dell’immagine.

Per vedere la demo clicca qui

Aggiungere una navigazione direzionale

Oltre alle thumbnails potrebbe essere utile aggiungere la possibilità all’utente di passare alla foto successiva o di tornare a quella precedente.

Per farè ciò è sufficiente creare due link con id da associare a jquery cycle

<div id="navPhotos">
<a id="prev" href=""><img src="images/button_prev.png" alt="Prev photo"></a>
<a id="next" href=""><img src="images/button_next.png" alt="Next photo"></a>
</div>

e aggiungere le opzioni prev e next al nostro script

[...]
next:   '#next',
prev:   '#prev',
[...]

In questo modo i due link porteranno sempre all’immagine precedente o successiva.

Da notare che entrambi i link sono contenuti nel div #navPhotos a questo viene assegnato un posizionamento assoluto e uno z-index elevato poichè jquery cycle utilizza la proprietà z-index per mostrare le immagini. Diventa dunque indispensabile settare uno z-index che sia sempre superiore al numero di immagini per poszionare i due link sopra lo slideshow.

Per vedere la demo clicca qui

Aggiungere una descrizione alle immagini

Per aggiungere una descrizione alle immagini è possibile sfruttare l’attributo alt del tag <img>.

Con l’aiuto dell opzioni before e after è possibile richiamare delle funzioni prima e dopo il caricamento dell’immagine.

Definiamo quindi una div #description dove andremo ad inserire le descrizioni

<div id="description">
</div>

E aggiungiamo al nostro script le opzioni after e before che richiameranno le funzioni onAfter e onBefore

[...]
before:  onBefore,
after:   onAfter,
[...]

Ora definiamo le funzioni onBefore e onAfter per caricare il testo contenuto nell’attributo alt del tag <img>

function onBefore() {
  $('#description p').fadeOut('1000');
}
function onAfter() {
  $('#description p').fadeIn('1000');
  $('#description').html('<p>' + this.alt + '</p>');
}

Queste due funzioni andranno definite al di fuori della funzione cycle poichè vengono valutate ad ogni caricamento della singola immagine.

Per il div #description è stata creata una regola css simile a #navPhotos in modo che la descrizione sia posta sopra lo slideshow con uno z-index superiore al numero di immagini presenti.

Per vedere una demo clicca qui

In conclusione

Come abbiamo visto jquery cycle mette a disposizione un numero elevato di opzioni per realizzare slideshow, è possibile inoltre aggiungere dei pulsanti per mettere in pausa o far ripartire lo slideshow, caricare contenuto diverso da immagini, settare un tempo di delay per sincronizzare più slideshow e customizzare i numerosi effetti presenti.

Per maggiori informazioni sulle possibilità di customizzazione esiste una sezione demo ed esempi sul sito di jquery cycle sicuramente molto utile.

Inoltre grazie alla gestione dello stile da css e al semplice markup è possibile creare valide alternative senza javascript per migliorarne l’accessibilità rendenfo questa una delle migliori soluzioni per realizzare slideshow in contesti statici e dinamici.


Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , , , . Contrassegna il permalink.

15 risposte a Realizzare slideshow complessi con jquery cycle

    • Mauro Accornero scrive:

      Grazie, per i complimenti e per il link, spiacente di essere stato assente così a lungo ma il lavoro mi ha completamente assorbito in quest’ultimo mese. In compenso ho avuto modo di vedere alcune cose e sto preparando un po’ di nuovi articoli su cose interessanti. Grazie ancora e complimenti per il sito!

  1. Pablo scrive:

    Finalmente una slideshow semplice da implementare!!
    E’ possibile aggiungere un preloader?

    • Mauro Accornero scrive:

      Considerato che le immagini sono presenti nel codice è possibile aggiungere una porzione di script in jquery che presenti un’immagine o una scritta di pre caricamento fino a che il contenuto non è completamente caricato.

  2. Domenico scrive:

    Ciao ti volevo chiedere utilizzando le miniature sotto in caso sono eccessive è possibile inserire tipo uno scroll fatto in js?
    cioè due freccine a destra e a manca per scorrere le altre foto come il plugin per jquery easyslider sto provando ma con scarsi risultati

    • Mauro Accornero scrive:

      E’ fattibile, avevo fatto una cosa del genere per un lavoro qualche tempo fa.
      Essendo il div delle thumbnail indipendente da quello della galleria è possibile gestirlo con jquery e css. In quel caso avevo inserito il div delle thumbnail con larghezza, altezza e overflow hidden, all’interno un altro div e le thumbnail. Con jquery permettevo all’utente di muovere il div interno contenente le thumbnail creando una “maschera” l’overflow hidden dell’elemento padre. La cosa più complessa è contare gli elementi all’interno del div e calcolare lo spazio occupato per far muovere correttamente le thumbnail. Dovrei fare un articolo per spiegare meglio, per il momento se ti basta ti lascio questo link come esempio Studio Now – Servizi Fotografici per Matrimoni.

  3. Stefano scrive:

    ciao
    volevo sapere io ho provato ha fare questo slideshow perchè ho la necessità di far apparire un commento sotto ogni foto, solo che quando vado ad aggiungere la div per il commento e le funzioni ad essa collegata le foto nn mi girano più anzi me le mette tutte quante sulla pagina una solto l’altra.
    Sapreti aiutarmi, ti anticipò che nn sono molto pratico quindi spero di essere stato chiaro nell’esporti il mio problema, nel caso se ti è possibile mi invieresti tramite mail i file di prova dell’esempio che hai messo in rete.
    Grazie

    • Mauro Accornero scrive:

      Ciao Stefano, direi che se le immagini ti si presentano una sotto l’altra, il javascript ha qualche problema, potrebbe essere un problema di sintassi o un’errata inclusione del file. Scrivimi a info@howtoweb.it, girami i files su cui stai lavorando così vediamo dov’è il problema.

  4. jhonny scrive:

    Ciao,
    utilissima guida…proprio quello che cercavo! Mi sto adoperando per modificare e personalizzare un po lo script…

    Volevo chiederti se tu sai, perchè io ormai sono 2 settimane che ci provo senza risultati, se è possibile richiamare come “anteprime” non le slide caricate (le foto quindi) ma altre immagini.

    Ti faccio un esempio pratico:

    io carico 6 slide con 6 tipologie di foto. Sotto come anteprima, invece di far comparire le foto delle slide volevo far comparire 6 altre piccole foto. Ti spiego il motivo: sono un fotografo e volevo realizzare un portfolio dove al posto delle anteprime inserisco delle categorie di foto: paesaggi, uomo&donna, artistiche ecc e cosi cliccando su paesaggi visualizzo una foto esempio della categoria paesaggio…

    spero sia stato chiaro..purtroppo non sono espertissimo :D

    aspetto una gentile risposta.
    Grazie mille in anticipo

  5. Domenico scrive:

    Ciao, grazie per la guida.
    Ho provato a creare uno slideshow per far ruotare dei banner, ma appena aggiungo il tag <a href… alle immagini (nella div “photos”), i thumbnail sul pager scompaiono. Hai qualche suggerimento?
    Grazie in anticipo

  6. claudia scrive:

    Ciao,
    grazie per la guida.
    Io vorrei usare questo plugin con img di grandezza differente.
    Ho visto che lo script posiziona ogni slide in alto a sinistra e se modifico l’impostazione sui css esterni non accetta la modifica.
    Come posso fare a centare le immagini nel div contenitore?

    grazie mille

  7. mino scrive:

    ciao è molto interessante il tutorial che ci hai spiegato
    vorrei farti una domanda, se io volessi menttere al posto delle thumbnails del testo? come potrei fare? perkè se nella cerco di mettere il testo mi crea un’altra lista dove compaiono dei numeri 123ecc e quella è funzionante, mentre il testo che ho messo nei li non funziona

    • Mauro Accornero scrive:

      Nel mio esempio (quello con le thumbnail) inserivo le immagini invece di un testo richiamando una funzione di callback per creare la lista (pagerAnchorBuilder).
      Se noti all’interno dell’elemento img nell’attributo src vedi “slide.src” che restituisce l’url (o l’src) dell’immagine presente nello slide.
      Se non ricordo male puoi prelevare il contenuto degli attributi delle immagini, come ad esempio slide.alt o slide.title. Di default vengono creati i numeri ma possono essere editati come preferisci.

  8. Francesco scrive:

    ciao, volevo chiederti se e possibile cambiare al volo l’opzione timeout..?
    Grazie mille!
    Francesco

  9. marco scrive:

    Tu non puoi neanche immaginare l’aiuto chi mi hai dato….
    grazie di cuore
    Marco

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>