Man benötigt einen Satz von Bildern, deren Dateinamen durchnumeriert sind. Im Beispiel heißen die Bilder wuerfel-gross-01.jpg bis wuerfel-gross-06.jpg. Vor dem Punkt muß der Dateiname eine fortlaufende Nummer enthalten. Diese kann ein bis sechs Stellen lang sein und muß ggf. führende Nullen enthalten. Der Rest der Dateinamen ist bei allen Bildern gleich. Sie müssen alle im selben Verzeichnis stehen. Für Thumbnails erstellt man sinnvollerweise einen zweiten Satz mit kleinen Bildern, im Beispiel wuerfel-klein-01.gif bis wuerfel-klein-06.gif. Die Nummer bei den kleinen Bildern muß im Wert und in der Länge denen der großen Bilder entsprechen. Passende Bilder kann man komfortabel mit dem kostenlosen IrfanView aus eigenen Fotos oder Grafiken erzeugen.
Die folgende HTML - Datei reicht für eine Diashow mit beliebig vielen Bildern. Hier wurde bewußt auf alle Styles verzichtet.
so sieht's aus
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>fk_slideshow - Diashow mit wenig Aufwand</title>
<script src="fk_slideshow.js" type="text/javascript"></script>
</head>
<body>
<h2>fk_slideshow.js</h2>
<h3>Diashow mit wenig Aufwand</h3>
<div>
<img src="img/wuerfel-gross-01.jpg" alt="large Pics" id="myImage"/>
</div>
<p>
<a href="javascript:mySlideshow.start(2000)">Show start</a>
<a href="javascript:mySlideshow.stop()">Show stop</a>
<br/>
<a href="javascript:mySlideshow.prev()">Bild zurück</a>
<a href="javascript:mySlideshow.next()">Bild vor</a>
</p>
<table>
<tr>
<td id="myFirstThumb">
<img src="img/wuerfel-klein-01.gif" alt="small Pic"
onclick="mySlideshow.showThumb(this);"/>
</td>
</tr>
</table>
<script type="text/javascript">
var mySlideshow = fk_makeSlideshowById('myImage', 6, 800);
fk_makeThumbs('myFirstThumb', 3, 6);
</script>
</body>
</html>
Diashow
Zunächst muß die JavaScript Datei fk_slideshow.js eingebunden werden. Das geschieht am Besten im Header mit <script src="fk_slideshow.js" type="text/javascript"></script>. Die Datei können Sie hier herunterladen und auf Ihren Webspace kopieren.
Dann brauchen wir ein normales <img> Tag für das erste Bild mit einer eindeutigen id - im Beispiel: myImage. Dieses Bild sollte von einem Block Element eingeschlossen sein - hier ein <div>. Die slideshow wird am Ende der Datei eingerichtet mit dem JavaScript Befehl:
var mySlideshow = fk_makeSlideshowById('myImage', 6, 800);
Dabei werden 3 Parameter übergeben:
- id des <img> Tag
- Anzahl der Bilder (einschließlich des ersten)
- Dauer des Überblendeffektes in Millisekunden (0 bedeutet ohne Effekt)
Die Variable mySlideshow wird benutzt um die Methoden von fk_slideshow aufzurufen. Vier Aufrufe sind bei den Control - Links unter dem Bild: start(millisec), stop(), prev() und next().
Aufgerufen werden sie mit der Variablen, einem Punkt und dem Methodennamen (z.B. <a href="javascript:mySlideshow.next()">). Bei start(millisec) muß als Parameter noch die Zeit zwischen zwei automatisch angezeigten Bildern in Millisekunden angegeben werden. Dieser Wert sollte größer sein als die Dauer des Überblendeffektes.
Und schon funktioniert die Diashow.
Thumbnails
Für die kleinen Bilder wird eine Tabelle mit einer Zeile und einer Spalte definiert. Die einzige Tabellenzelle bekommt eine eindeutige ID (im Beispiel <td id="myFirstThumb">). Innerhalb dieser Zelle wird ein <img> Tag für das erste Bildchen codiert. Darin wird mit onclick="mySlideshow.showThumb(this);" eine weitere Methode von fk_slideshow aufgerufen: showThumb(img). Dadurch wird das große Bild mit der gleichen Nummer in der Diashow angezeigt wenn man auf einen Thumbnail klickt. Mit this wird hier das IMG-Element an die Methode übergeben.
Für die Erzeugung der weiteren kleinen Bilder dient der JavaScript Befehl am Ende der Datei:
fk_makeThumbs('myFirstThumb', 3, 6);
Dabei werden wieder drei Parameter übergeben:
- id des <td> Tags der einzigen Tabellenzelle
- Anzahl der Bilder in einer Zeile (inklusive des ersten)
- Anzahl der Bilder insgesamt (inklusive des ersten)
Und schon funktionieren die Tumbnails. Die Tabellenzelle wird vom JavaScript vervielfacht und die Bilder darin durch das zweite bis letzte Bild ausgetauscht.