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!