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

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.

Fonti esterne

Il sito dove è possibile fare il download dello script base

Ultimi Commenti
  1. Marco

Lascia un commento

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