Lo script che presentiamo è un interessante slideshow con preload. Le foto, dopo essere state precaricate nella cache del computer, scorreranno tramite due bottoni. Non c'è limite alla immagini inseribili anche se, ovviamente, più saranno numerose e più ci vorrà tempo per il preload.
Il codice è perfettamente compatibile con i tre maggiori browser in circolazione: Explorer 5.x, Navigator 4.x e Netscape 6.x.
L'esempio si compone di 4 file:
- esempio.htm
- 01.gif
- 02.gif
- 03.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo il codice javascript tra i tag <head> della pagina:
<script type="text/javascript" language="javascript">
var Slides = new Array('01.gif','02.gif','03.gif');
function CacheImage(ImageSource) {
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}
function ShowSlide(Direction) {
if (SlideReady) {
NextSlide = CurrentSlide + Direction;
document.SlideShow.Previous.disabled = (NextSlide == 0);
document.SlideShow.Next.disabled = (NextSlide ==
(Slides.length-1));
if ((NextSlide>= 0) && (NextSlide < Slides.length)) {
document.images['Screen'].src = Slides[NextSlide].src;
CurrentSlide = NextSlide++;
Message = 'Picture ' + (CurrentSlide+1) + ' of ' +
Slides.length;
self.defaultStatus = Message;
if (Direction == 1) CacheNextSlide();
}
return true;
}
}
function Download() {
if (Slides[NextSlide].complete) {
SlideReady = true;
self.defaultStatus = Message;
}
else setTimeout("Download()", 100);
return true;
}
function CacheNextSlide() {
if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] ==
'string'))
{
SlideReady = false;
self.defaultStatus = 'Downloading next picture...';
Slides[NextSlide] = CacheImage(Slides[NextSlide]);
Download();
}
return true;
}
function StartSlideShow() {
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
SlideReady = true;
ShowSlide(1);
}
</script>
Non dobbiamo fare altro che inserire, dentro un array, i nomi delle immagini da precaricare.
var Slides = new Array('01.gif','02.gif','03.gif');
Per aggiungere una nuova immagine basterà inserire, nelle parentesi tonde, una virgola ed il nome della foto tra due apici singoli.
A questo punto dobbiamo impostare, nel punto desiderato della pagina, l'immagine di partenza dello slideshow:
<img name="screen" width=100 height=100/>
Cosa importante è lasciare invariato l'attributo "Screen" all'interno del tag <img...>
Successivamente prepariamo il form contenente i bottoni per lo scorrimento della galleria:
<form name="SlideShow">
<input type="button" name="Previous" value=" << " onClick="ShowSlide(-1)">
<input type="button" name="Next" value=">> " onClick="ShowSlide(1)">
</form>
In ultimo non resta che far partire una funzione al caricamento della pagina. Nel tag <body...> inseriamo il gestore di eventi onLoad:
onLoad="StartSlideShow()"
Il nostro <body...> quindi sarà di questo tipo:
<body bgcolor="white" vlink="blue" link="blue" onload="startslideshow()">
Altre modifiche non sono necessarie.
