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
3 Commenti
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
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.
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!