Tutorial Javascript: Slideshow con Effetti Speciali

Tornano i tutorial su javascript e oggi vediamo Floom, un bellissimo slideshow di foto che utilizza la libreria mootools.

L’effetto è molto gradevole ed è semplicissimo da realizzare. Inoltre è supportato da tutti i browser, compreso anche Internet Explorer 6!

Prima di andare a vedere come realizzare lo slideshow, ti consiglio di scaricare i sorgenti, dalla pagina originale dello script.

Bene, cominciamo!

Passo 1 – Impostazioni Preliminari

Inserire le righe di codice tra i tag head necessarie per richiamare i vari script, e i fogli di stile css:

<script type="text/javascript" charset="utf-8" src="mootools-1.2.2-core.js"></script>
<script type="text/javascript" charset="utf-8" src="mootools-1.2.2.2-more.js"></script>
<script type="text/javascript" charset="utf-8" src="../Source/floom-1.0.js"></script>

<link rel="stylesheet" href="screen.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="floom/floom.css" type="text/css" media="screen" charset="utf-8" />

Passo 2 – Utilizzo dello script

Hai 2 possibilità per utilizzare lo script.

1) La prima è di inserire le immagini e la descrizione  in una variabile slides, tra i tag head

<script type="text/javascript" charset="utf-8">
window.addEvent('domready', function(e) {
var slides = [
{
image: 'photo-1.jpg',
caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
},
{
image: 'photo-2.jpg',
caption: 'Excepteur sint occaecat cupidatat non proident'
}
];

$('blinds').floom(slides, {
axis: 'vertical'
});
});

Poi tra i tag body basterà semplicementre creare un div con id=”blinds”, che conterrà lo slideshow:
<div id="blinds"></div>

2) L’altro modo è quello di inserire le immagini e le descrizioni direttamente dentro il div blinds, mentre nel codice javascript, sempre tra i tag head basta impostare le opzioni dello slideshow.

$('blinds').floom($$('#blinds img'), {
axis: 'vertical'
});

<div id="blinds">
<img title="Description 0" alt="" src="nature-photo0.jpg" />
<img title="Description 1" alt="" src="nature-photo1.jpg" />
<img title="Description 2" alt="" src="nature-photo2.jpg" />
<img title="Description 3" alt="" src="nature-photo3.jpg" />
<img title="Description 4" alt="" src="nature-photo4.jpg" />
</div>

In questo caso la descrizione la dovrai inserire nell’attributo title.

Semplice vero?

Lascio a te provare tutte le impostazioni dello slideshow, che puoi trovare nella pagina dell’autore dello script.

In passato ho parlato di altre tecniche per realizzare degli slideshow:

- CU3ER: Fantastico SlideShow 3D Di Foto In Flash (prima parte | seconda parte);
- Tutorial Jquery: Creare fantastici slideshow in 5 minuti;
- Supersized – Slideshow di Immagini a Schermo Intero