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>
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" />
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>
Infine la funzione base dello script, da inserire appena sotto il richiamo delle librerie di 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.