Javascript – Slide di immagini e avanzamento con pulsanti

Attraverso l’uso di jquery e di alcune sue classi implementate, possiamo costruire una slide (galleria) di immagini a scorrimento.
Lo script che trovate qui sotto, liberamente scaricabile, contiene già tutti i codici occorrenti e tre immagini di presentazione. Il codice è assolutamente stand-alone, il che significa che non ha bisogno di server per girare (e lo potete avviare anche nel vostro computer): infatti fa uso esclusivamente di html e jquery.

Innanzitutto, diamo un’occhiata ai file presenti nello script. Dopo ci occuperemo di visionarli nel dettaglio.
– index.html: è la pagina che visualizzerà la slide
– style.css : il foglio di stile che gestisce l’aspetto della pagina e della slide
– jquery.js : contiene le librerie necessarie a utilizzare jquery
– jquery.cycle.all.js : è il cuore del funzionamento della slide e si appoggia al file jquery.js

La slide può contenere, virtualmente, un numero infinito di immagini, che dovranno essere posizionate nella cartella img.

Download script

Pagina diretta alla scheda e al download del codice

Le inclusioni generali

Nell’header includiamo prima di tutto il foglio di stile, le classi jquery e le classi necessarie allo sviluppo della slide:

1
2
3

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.cycle.all.js"></script> <!-- slide -->

Controlli slide

La parte seguente, in jquery, si occupa di stabilire le opzioni da applicare alla slide. Fa riferimento, naturalmente, alle opzioni descritte nel file jquery.cycle.all.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- CONTROLLI SLIDE -->
<script type="text/javascript">
function controllo_ultima(){
	if(document.getElementById('ultima').style.display=="block"){
		$('.slideshow').cycle('stop');
	}	
}
$(document).ready(function() {				
	$('#slide_interna')
	.before('<div id="#btn_slide3">')
	.cycle({
		fx: 'scrollLeft',
		speed: 1000, 
		timeout: 3000, //per bloccare lo scorrimento della slide, basta mettere il valore a 0
		pager: '#btn_slide_banner3'			
	})
	.css({ 'visibility' : 'visible' });	
});
</script>

Come scritto nel commento, è possibile bloccare lo scorrimento della slide impostando il valore “0” alla variabile timeout: in questo caso, per scorrere le immagini sarà necessario premere sui pulsanti.
La variabile speed controlla invece la velocità di scorrimento automatico delle immagini.

La stampa vera e propria dei pulsanti della slide sarà data dal seguente codice html:

1
2
3
4

<div class="controlli_slide" style="float:left; width:100px; margin-left:-30px;">
	<div class="btn_slide" id="btn_slide_banner3"></div>
	<div class="clear"></div>
</div>

I blocchi contenenti le singole immagini

I blocchi saranno tutti di questo tipo (al numero 1 va sostituito, progressivamente, il numero della slide):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- PRIMO BLOCCO -->
<div class="corpo" id="valuta1" style="height:560px; width:100%;">

	<div class="slide_immagine1">

	</div>
	<div class="clear"></div>

	<div class="slide_blocco">
		Testo vario sotto all'immagine
	</div>

	<div class="clear"></div>

</div>

Ogni parte sarà ovviamente personalizzabile a piacere. In particolare, al posto del testo si potranno inserire immagini statiche o qualsiasi elemento voluto.

Il sito dove è possibile fare il download dello script base