Slidorion. Una slideshow in jQuery per il vostro sito web

Attenzione! Questo post non è stato più aggiornato da almeno 90 giorni. Potrebbe contenere dati, notizie e scripts non aggiornati o non in linea con gli attuali standard!

Volevo segnalarvi un ottimo plugin jQuery che permette di implementare nel vostro sito web una slideshow con accordion. Si tratta di Slidorion.

Il plugin è facilmente installabile. Prima di tutto è necessario avere a disposizione le librerie jQuery. Successivamente, dovete richiamare nel vostro tema quelle specifiche di Slidorion (per WordPress, dovete usare l’estensione wp_enqueue_script):

<script src="URL-VOSTRO-TEMA/js/jquery.easing.js"></script>
<script src="URL-VOSTRO-TEMA/js/jquery.slidorion.min.js"></script>

1 2	<script src="URL-VOSTRO-TEMA/js/jquery.easing.js"></script> <script src="URL-VOSTRO-TEMA/js/jquery.slidorion.min.js"></script>

Fatto questo dovete richiamare il css necessario per la visualizzazione corretta del plugin (per WordPress idem come sopra). Naturalmente potete modificarlo per armonizzarlo con lo stile del vostro blog:

<link href="URL-VOSTRO-TEMA/slidorion.css" rel="stylesheet" />

1	<link href="URL-VOSTRO-TEMA/slidorion.css" rel="stylesheet" />

A questo punto, la struttura html che dovrà riprodurre lo slide:

<div id="slidorion">
	<div id="slider">
		<div></div>
		<div></div>
		<div></div>
	</div>

	<div id="accordion">
		<div>New Features</div>
		<div>
			<!-- content -->
		</div>
		<div>A Simple Image</div>
		<div>
			<!-- content -->
		</div>
		<div>Background Image</div>
		<div>
			<!-- content -->
		</div>
	</div>
</div>

</div>

<div>New Features</div>

<div>

</div>

<div>A Simple Image</div>

<div>

</div>

<div>Background Image</div>

<div>

</div>

Infine la funzione base dello script, da inserire appena sotto il richiamo delle librerie di slidorion:

$(document).ready(function(){
	$('#slidorion').slidorion();
});

$(document).ready(function(){

$('#slidorion').slidorion();

});

Naturalmente il plugin prevede una serie di funzionalità che potete implementare con estrema facilità, tra cui la velocità dello slide, lo stop con il passaggio del mouse e altre interessanti features che potete sperimentare sul sito del plugin o nella demo.

Download | Demo | Autore