Nel presentare lo script di cui parleremo in questo articolo, l'autore (Nathan Smith) sottolinea come possa essere una valida alternativa a slideshow con rotazione di immagini realizzati con Flash e componenti aggiuntivi del programma di Adobe come SlideShowPro. Quella di Smith, tra l'altro, è la revisione di un precedente script opera di Steven G. Chipman. Dati i giusti e meritati crediti, mettiamoci all'opera, non prima di rimandare all'esempio che andremo a realizzare.
Come si vede, si tratta di un semplice box al cui interno scorrono a rotazione 4 immagini. Il passaggio dall'una all'altra avviene con una morbida transizione di tipo fade. Ciascuna immagine è anche un link: basta soffermarsi con il mouse su ciascuna per notare che il cursore si trasforma nella classica manina e che un tooltip (viene usato l'attributo title) indica la pagina di destinazione.
Di cosa abbiamo bisogno
Nel pacchetto zip allegato troverete questi file:
- esempio.html - La pagina dell'esempio appena visto
- acqua.jpg, aria.jpg, fuoco.jpg, terra.jpg - Le immagini usate nello slideshow
- slideshow.css e slideshow2.css - I due CSS necessari alla presentazione del box/slideshow
- xfade2.js - Lo script
La parte HTML
Iniziamo dalle fondamenta, ovvero dall'HTML. La struttura è delle più semplici e intuitive. Si tratta di definire un div con id="slideshow" e di inserire al suo interno il richiamo alle immagini da usare nello slideshow (riportiamo per comodità solo il codice per la prima imamgine):
<div id="slideshow">
<img
src="terra.jpg"
alt="Terra"
title="HTML.it"
onclick="parent.location='http://www.html.it'"
/>
......................
</div>
Niente di trascendentale. Per ciascuna immagine si definiscono, oltre ovviamente a src, l'attributo alt e il title. Si chiude con un onclick che serve per impostare la destinazione del link. Usando parent.location il link si aprirà nella stessa finestra. Occhio all'uso di apici e doppi apici.
I CSS
Nella parte <head> della pagina è presente il richiamo al foglio di stile slideshow.css:
<link rel="stylesheet" href='slideshow.css' type="text/css" />
Contiene solo un paio di regole:
#slideshow {
border: 1px solid #000;
overflow: hidden;
margin: 50px auto 10px;
position: relative;
width: 400px;
height: 300px;
}
#slideshow img {
width: 400px;
height: 300px;
}
La prima serve a definire il posizionamento del box con lo slideshow. È stata mantenuta l'impostazione dell'esempio originale, con un div centrato in senso orizzontale e un sottile bordo nero. Qui ognuno potrà personalizzare come meglio crede.
Attenzione però alle proprietà overflow, width e height. Possono infatti influire sulla visualizzazione delle immagini, in combinazione con la seconda regola (#slideshow img). Le foto usate nella nostra demo, come potete verificare, sono di 640x480px. Impostando le dimensioni (400x300px) via CSS, le ridimensioneremo per adeguarle alle dimensioni del box. Provate ad eliminare la regola #slideshow img dal foglio di stile per vedere cosa succede. Al'interno del box visualizziamo solo una porzione di 400x300px, mentre la parte eccedente viene nascosta per via della dichiarazione overflow: hidden. Ecco comunque una prova live.
E il secondo CSS (slideshow2.css)? Questo viene caricato dinamicamente dallo script. Serve solo a impostare il cursore, la visulizzazione e il posizionamento delle immagini all'interno del div. Deve essere lasciato intatto. Attenzione: lo script presuppone che slideshow2.css sia nella stessa directory di xfade2.js.
Lo script
Veniamo allo script:
<script type="text/javascript" src="xfade2.js"></script>
Contiene alcune parti che è possibile modificare per adeguare tutto alle proprie esigenze.
Per prima cosa, osserviamo questa riga:
imgs = d.getElementById('slideshow').getElementsByTagName('img');
Contiene il riferimento al div con lo slideshow. Se nella parte HTML vorrete usare un id diverso da 'slideshow' dovrete modificare di conseguenza anche questa parte con il riferimento all'id che avrete deciso di usare (la stessa cosa andrà fatta nei due CSS).
Subito sotto troviamo questa riga:
setTimeout(so_xfade,3000);
Intervenendo sul valore numerico (3000), si può impostare la velocità di rotazione. Inserite in pratica un valore più grande se volete che le singole immagini siano visualizzate più a lungo.
Per il resto tutto può essere lasciato intatto. Vi lascio comunque al codice completo se vorrete approfondire il funzionamento e la struttura dello script.
