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

L'articolo ti è stato utile? se vuoi ringraziarmi offrimi un caffè, o una pizza se vuoi esagerare!

E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.Se non sai cosa sono, guarda questo video. Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

Tutorial Jquery – Uno Bellissimo Slideshow Di Foto Originale

Appuntamento con i tutorial su jquery, dove andremo a vedere uno bellissimo slideshow di foto dove potrai realizzare effetti di transizione davvero...

15 Fantastiche Gallery di Foto e Slideshow Jquery

Oggi voglio segnalarti una fantastica raccolta di gallerie fotografiche  e slideshow Jquery,  da utilizzare per i tuoi progetti, con il vantaggio di...

Tutorial Jquery – Slideshow Di Foto Come Sfondo Del Sito

Uno dei trend del momento è l’utilizzo di immagini grandi come sfondo nel sito. In questo modo si vuol dare forte risalto alle immagini, suscitando...