Fw

Wordpress Creative Developer

Tutorial Javascript: Slideshow con Effetti Speciali

  • Tutorial Jquery
  • -

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

slideshowmootools

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

3 Commenti

  1. ciao sto usando questo slideshow, su un sito. Nella stessa pagina sto usando anche il java ColorBox, però evidentemente i due java insieme vanno in conflitto, uno dei due non si visualizza.
    Ha mica qualche idea in merito, conviene secondo te che cambio slideshow?

    ciao e grazie

  2. Ciao Sergio e benvenuto nel blog 😉

    In che ordine carichi gli script? Prova a caricare prima jQuery e poi Mootools. Molte volte basta scambiare l’ordine per far funzionare tutto.

  3. caio! sto usando qst slide ma non mi carica le foto e non so più cosa tentare!! ho creato un unico css…
    e utilizzato il sistema 2 inserendo nel div le immagini…
    i js sono tutti in un unica cartella e le immagini in un’altra.

    ecco il codice

    window.addEvent(‘domready’, function(e) {
    $(‘blinds’).floom($$(‘#blinds img’), {
    axis: ‘vertical’
    });
    });

    qui ci sono le immagini

    hai qlk consiglio??
    Ps gli indirizze delle immagini sono giusti!! ho controllato!

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *