JQuery – Un plugin per slide di immagini

JQuery Cycle è un’estensione di jquery che permette di creare una slide di immagini in movimento.
La sua particolarità è che si possono usare diversi effetti, dal solito fade allo zoom allo sfogliare le foto, e si possono aggiungere link per navigare tra le immagini, tutto con una facilità disarmante.

Per iniziare scaricate jquery qui e  il jquery-cycle plugin a questo indirizzo.

Altrimenti potete includerli nel file semplicemente in questo modo

1
2
3
4
5

<!-- include jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<!-- include Cycle plugin -->
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.73.js" type="text/javascript"></script>

Andiamo nel vivo del discorso. Questo è il codice javascript da includere nella pagina.

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
$(document).ready(function() { // controlliamo che la pagina sia stata caricata 
    $('.slideshow').cycle({
		fx: 'fade',
		speed: 1000,
		timeout: 4000,
		prev: '#prev',
		next: '#next'
	});
});
</script>

Mentre il codice html è

1
2
3
4
5
6
7
8

<div class="slideshow">
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="300" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>
<a href="javascript:void(0)" id="prev">prev</a> <a href="javascript:void(0)" id="next">next</a>

La funzione verrà applicata alla classe “slideshow” e prenderà in automatico tutte le immagini in modo ordinato dall’alto al basso.
Vediamo i parametri passati a jquery:
fx impone il metodo di transizione. Fade, di default, è la sfumatura da un’immagine all’altra. Per vedere la lista intera andate a questa pagina.
speed è la velocità in millisecondi della transizione. 1000 quindi indica che la sfumatura durerà 1 secondo.
timeout è la durata in millisecondi dell’immagine ferma. In questo caso l’immagine rimane per 4 secondi.
Prev e next invece indicano quali pulsanti regoleranno l’avanti e indietro nello scorrimento delle immagini.

E’ possibile anche aggiungere pulsanti per navigare tutte le immagini senza essere limitati dal prev-next, creerò un articolo apposito per non appesantire questo.
Questo è il sito ufficiale di Jquery-cycle .