InnerFade è un comodo plugin per jQuery (la famosa libreria javascript) che permette di fare transizioni visive tra oggetti: quindi non solo immagini ma anche interi DIV con dentro tutto quello che volete.
Usarlo è banale: è sufficiente creare un un elemento “padre” in HTML e tutti i sottofigli verranno visualizzati uno alla volta in base alle opzioni configurate. Per comodita potete usare la classica struttura UL-LI, ricordandovi di resettare gli stili, in modo non ci siano margin, padding e pallini che disturbano.
<style type="text/css"> ul{list-style:none;margin:0;padding:0;} </style> <ul id="gira"> <li>primo</li> <li>secondo</li> <li>terzo</li> </ul>
Non vi resta che applicare poche righe di JS assicurandovi che jQuery e innerfade (.js) siano caricati:
<script type="text/javascript"> $(document).ready(function() { $('#gira').innerfade({ speed: 3000, timeout: 1000, type: 'sequence', containerheight: '252px' }); }); </script>
Attenzione: se state per impazzire perchè le vostre “slide” non si vedono tutti non avete sbagliato nulla, è solo un problema di settaggio. I furboni degli sviluppatori hanno messo due opzioni di tempo che sono speed e timeout. Entrambe sono in millisecondi. Il problema è che timeout è comprensivo del tempo di fading. Se per caso volete slideshow molto lenti con poca permanenza assicuratevi che timeout sia sempre maggiore di speed!
Grazie a Capobecchino per l’imbeccata!