Immagino che molti di voi conoscano quel famosissimo screensaver del Mac Os X, dove le immagini si spostano e si zoomano nello schermo con un effetto dissolvenza.
Da oggi potete ricreare questo accattivante effetto anche nei vostri siti web, grazie a "Slideshow".
"Slideshow" è una classe javascript che permette di "animare" la presentazione di immagini nel vostro sito, e si basa sul framework Mootools.
A questo link potete vedere una demo e scaricare la classe e i moduli di Mootools necessari.
COME UTILIZZARLA
Da oggi potete ricreare questo accattivante effetto anche nei vostri siti web, grazie a "Slideshow".
"Slideshow" è una classe javascript che permette di "animare" la presentazione di immagini nel vostro sito, e si basa sul framework Mootools.
A questo link potete vedere una demo e scaricare la classe e i moduli di Mootools necessari.
COME UTILIZZARLA
Per usare questa classe è importante conoscere un minimo di HTML e di Javascript.
Dopo aver scaricato i file mootools.js e slideshow.js, è importante creare un collegamento a questi file nella head della nostra pagina html, in questo modo:
Dopo aver scaricato i file mootools.js e slideshow.js, è importante creare un collegamento a questi file nella head della nostra pagina html, in questo modo:
<head>
...
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
</head>
A questo punto dobbiamo inserire la prima delle immagini che vogliamo far scorrere nello slideshow all'interno di un div, che per comodità chiamaremo "my_slideshow":
<div id="my_slideshow" class="slideshow">
<img src="images/1.jpg" alt="A picture" width="400" height="300" />
</div>
Ora dobbiamo inizializzare lo script. Consiglio di farlo sempre nella head del sito, di seguito ai link ai due file inseriti poco fa:
<head>
...
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slideshow.js"></script> <script type="text/javascript">
window.onload = function() { myShow = new Slideshow('my_slideshow', {hu: '../images/', images: ['apple.jpg','1.png','aaa.gif'], height: 300, width: 400, type: 'combo', navigation: 'arrows+'}); }
</script>
</head>
Come vedere, la funzione richiama diverse proprietà:- 'my_slideshow' : l'id del div nel quale abbiamo inserito la prima immagine;
- hu: '../images/' : il percorso relativo delle immagini da caricare;
- images: [...] : un array contenente tutte le immagini che vogliamo mostrare;
- height : l'altezza delle immagini;
- width: la larghezza delle immagini;
- type: il tipo di slideshow (è possibile scegliere tra fade, pan, zoom, combo, push o wipe);
- navigation: il tipo di navigazione tra le immagini (è possibile scegliere tra arrows, arrows+ o thumbnails);
Abbiamo finito, buon divertimento!
2 commenti:
Grazie dell'aiuto, ci ho perso due ore a capire perché non trovava le immagini, poi sono capitato qui ed ho risolto. Il path relativo ../ nelle immagini va usato perché il javascript è dentro una cartella.
Grazie
Scusate, qualcuno sa aiutarmi...?! Io vorrei proprio realizzare quello che viene mostrato cliccando sul esempio: "Hyperlink your show:Lightbox mashup" del sito: http://www.electricprism.com/aeron/slideshow/index.html
ma ogni volta qualcosa non va bene :(
Posta un commento