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):
|
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:
|
1 |
<link href="URL-VOSTRO-TEMA/slidorion.css" rel="stylesheet" /> |
A questo punto, la struttura html che dovrà riprodurre lo slide:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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:
|
1 2 3 |
$(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.