Creare slideshow di foto in una pagina web
Capita di aver bisogno di mostrare in un sito web uno slideshow, una carrellata o una sequenza di immagini o fotografie, e i modi per fare questo sono sicuramente molti.
Esistono servizi online in cui basta caricare le foto e dopo averle caricate ci viene fornito il codice per incorporare un player con il nostro slideshow, magari pure arricchito di musica.
Però se vogliamo qualcosa di relativamente più semplice, che non comporti l’uso di servizi esterni o l’utilizzo di tecnologie video o Flash, ci sono dei javascript che fanno al caso nostro!
Cycle è un plugin per jQuery per creare slideshow e caroselli di immagini, animare sequenze di immagini, con diversi tipi di animazioni e transizioni; supporta la pausa on-hover del mouse, l’auto-stop, l’adattamento automatico delle immagini, …e tanto altro. Supporta – ma non richiede – i plugin Metadata e Easing.
Cycle Lite è una versione più leggera di Cycle.
Questa versione lite è ottimizzata nelle dimensioni dei file e supporta solamente la transizione in dissolvenza.
Supporta anche il pause-on-hover (e cioè arresta il ciclo nel momento in cui il mouse si sovrappone all’immagine), l’adattamento automatico, i callback prima/dopo, e reagisce al click del mouse.
Per funzionare, il plugin mette a disposizione un metodo chiamato “cycle” il quale è richiamato su un contenitore di elementi (le immagini, o gli elementi, che andremo a “ciclare”); ogni elemento figlio del contenitore diventa uno “slide”.
Ci sono diversi parametri facoltativi per personalizzare lo slideshow: il tempo tra le varie transizioni, la loro velocità, l’altezza del contenitore, ritardo addizionale per la prima transizione (anche negativo), ecc.ecc.
Ad esempio, per farlo creare uno slideshow nella configurazione base basta una riga:
$('#slideshow1').cycle()
link: Cycle , Cycle Lite
