SELFHTML

DHTML:
fkds.js - Diashow mit wenig Aufwand

mit 30 Zeilen HTML-Code und fertigen Java Script Objekten eine komplette Diashow mit bis zu 100 Bildern und Thumbnails erzeugen

Informationsseite

nach unten Rolf Nakielski
nach unten Hinweise zum Thema
nach unten Beispiel mit Erläuterungen
nach unten JavaScript-Datei mit Erläuterungen
nach unten Weiterführende Links

Seitenende 

Fred Kasulzke

E-Mail: E-Mail  fred@kasulzke.de
Homepage-URL: deutschsprachige Seite  http://www.kasulzke.de

Dieser Beitrag wurde für Selfhtml geschrieben ist aber bislang nicht von Selfhtml veröffentlicht worden und kein Teil von Selfhtml. Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!

Achtung

Mittlerweile gibt es eine Weiterentwicklung der Diashow unter dem Namen fk_slideshow. Damit kann man beliebig viele Bilder darstellen und es verfügt über verschiedene Effekte zum Überblenden oder Aus- und Einblenden. Außerdem gibt es einige Hilfen für slideshows mit Hoch und Querformat oder Start / Stop Buttons. Der Einbau bleibt so einfach wie beim alten fkds.

Beschrieben ist das Ganze auf der Seite der Fred Kasulzke Internet Werkstatt.

Hier geht es direkt zu fk_slideshow.

 

nach obennach unten 

Hinweise zum Thema

Mit Hilfe der JavaScript - Datei fkds.js (Fred Kasulzke Dia Show) kann man sehr simpel eine Diashow mit Thumbnails erzeugen. Sie stellt Befehle zum Starten und Stoppen einer automatischen Wechselanzeige von Bildern mit wählbarer Geschwindigkeit zur Verfügung. Außerdem gibt es Befehle für die Anzeige des nächsten Bildes, vorherigen Bildes und des entsprechenden Bildes bei Klick auf das Thumbnail. Diese kleinen Bilder lassen sich sehr einfach in einer Tabelle darstellen in die nur eine Zeile und eine Spalte mit dem ersten Thumbnail geschrieben wird. Eine Funktion aus fkds.js schreibt die weiteren bis zu 99 Bilder mit Spalten und Zeilen in die Tabelle.

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. Die letzten 2 Stellen des Dateinamens vor dem Punkt müssen eine fortlaufende Nummer enthalten. Für Thumbnails erstellt man sinnvollerweise einen zweiten Satz kleine Bilder, im Beispiel wuerfel-klein-01.gif bis wuerfel-klein-06.gif. Passende Bilder und Dateinamen kann man komfortabel mit dem kostenlosen englischsprachige Seite IrfanView oder anderen Bildbearbeitungsprogrammen aus eigenen Fotos oder Grafiken erzeugen.

nach obennach unten 

Beispiel mit Erläuterungen

Beispiel

Popup-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>fkds - Diashow mit wenig Aufwand</title>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
      <meta http-equiv="Content-Script-Type" content="text/javascript">
      <script src="fkds.js" type="text/javascript"></script>
   </head>
   <body>
      <h2>fkds.js</h2>
      <h3>Diashow mit wenig Aufwand</h3>
      <img  src="wuerfel-gross-01.jpg" alt="gro&szlig;e Beispiel Bilder" id="fkdsImg">
      <script type="text/javascript">var diashow = new fkds('diashow', 'fkdsImg', 6);</script>
      <p>
         <a href="javascript:diashow.start(1500)">Show start</a>
         <a href="javascript:diashow.stop()">Show stop</a>
         <br>
         <a href="javascript:diashow.prev()">Bild zur&uuml;ck</a>
         <a href="javascript:diashow.next()">Bild vor</a>
      </p>
      <table>
         <tr>
            <td id="fkdsThumb">
               <img src="wuerfel-klein-01.gif" alt="kleines Beispiel Bild" onclick="diashow.showThumb(this);">
            </td>
         </tr>		
      </table>
      <script type="text/javascript">fkdsMakeThumbs('fkdsThumb', 3, 6);</script>
   </body>
</html>

Erläuterung:

Diashow

Zunächst wird im Header die Datei fkds.js eingebunden: <script src="fkds.js" type="text/javascript"></script>. Im Body folgt dann ein IMG-Tag, mit dem ersten Bild der Diashow als src und einer eindeutigen ID (im Beispiel id="fkdsImg"). Im Anschluß wird mit var diashow = new fkds('diashow', 'fkdsImg', 6); ein neues fkds Objekt mit dem Namen diashow erzeugt. Dabei werden 3 Parameter angegeben:

  1. Objektnname (muß exakt der Name zwischen var und = new sein - wird intern für window.setInterval() benötigt)
  2. id des IMG-Tag
  3. Anzahl der Bilder (inklusive des ersten)

Dieses Objekt stellt einige Methoden zur Verfügung. Vier davon werden in den folgenden Links aufgerufen: start(millisec), stop(), prev() und next(). Aufgerufen werden sie mit dem Namen des Objektes (hier diashow) einem Punkt und dem Methodennamen (z.B. <a href="javascript:diashow.next()">). Bei start(millisec) muß als Parameter noch die Zeit zwischen zwei automatisch angezeigten Bildern in Millisekunden angegeben werden.

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="fkdsThumb">). Innerhalb dieser Zelle wird ein IMG-Tag für das erste Bildchen codiert. Darin wird mit onclick="diashow.showThumb(this);" eine weitere Methode von fkds aufgerufen: showThumb(img). Damit wird das große Bild mit der gleichen Nummer in der Diashow angezeigt wenn man auf das einen Thumbnail klickt. Mit this wird hier das IMG-Element an die Methode übergeben.

Der letzte JavaScript Aufruf erzeugt die weiteren kleinen Bilder: fkdsMakeThumbs('fkdsThumb', 3, 6);. Dabei wieder 3 Parameter angeben:

  1. id des IMG-Tag des ersten kleinen Bildes
  2. Anzahl der Bilder in einer Zeile (inklusive des ersten)
  3. Anzahl der Bilder insgesamt (inklusive des ersten)

JavaScript-Datei mit Erläuterungen

JavaScript Datei:

Um die Diashow zu verwenden muß man den folgenden JavaScript Code nicht verstehen. Die Funktionen müssen lediglich in der Datei fkds.js zur Verfügung stehen.

//Datei fkds.js - Fred Kasulzke Diashow 
//von Rolf Nakielski - www.nakielski.de

function fkds_start(inter){
	this.stop();
	var call = this.name + ".showNext()";
	this.showNext();
	this.aktiv = window.setInterval(call, inter);
}
function fkds_stop(){
	window.clearInterval(this.aktiv);
}
function fkds_prev(){
	this.stop();
	this.showPrev();
}
function fkds_next(){
	this.stop();
	this.showNext();
}
function fkds_showThumb(img){
	this.stop();
	this.dsPos = fkdnGetNumber(img.src) - this.numFirst;
	this.display();
}
function fkds_showPrev(){
	this.dsPos--;
	if (this.dsPos < 0){
		this.dsPos = this.anzshow - 1;
	}
	this.display();
}
function fkds_showNext(){
	this.dsPos++;
	if (this.dsPos >= this.anzshow){
		this.dsPos = 0;
	}
	this.display();
}
function fkds_display(){
	var neuNum = String(this.numFirst + this.dsPos + 1000).substring(2, 4);
	document.getElementById(this.id).src 
		= fkdnMake(fkdnGetPrefix(this.picFirst), neuNum, fkdnGetSuffix(this.picFirst));
}
function fkds(name, id, anzshow){
	this.name = name;
	this.id = id;
	this.anzshow = anzshow;
	this.picFirst = document.getElementById(id).src;
	this.numFirst = parseInt(fkdnGetNumber(this.picFirst), 10);
	this.dsPos = 0;
	this.aktiv;
	this.start = fkds_start;
	this.stop = fkds_stop;
	this.next = fkds_next;
	this.showNext = fkds_showNext;
	this.prev = fkds_prev;
	this.showPrev = fkds_showPrev;
	this.display = fkds_display;
	this.showThumb = fkds_showThumb;
}
function fkdnGetPrefix(dn){
	return dn.substring(0, dn.length - 6);
}
function fkdnGetNumber(dn){
	return dn.substring(dn.length - 6, dn.length - 4);
}
function fkdnGetSuffix(dn){
	return dn.substring(dn.length - 4, dn.length);
}
function fkdnMake(prefix, number, suffix){
	return prefix.concat(number).concat(suffix);
}
function fkdsMakeThumbs(id, inZeile, anz){
	var muster = document.getElementById(id);
	var parent = muster.parentNode;
	var opa = parent.parentNode; 
	var musterImg = muster.getElementsByTagName("img")[0];
	var musterPic = musterImg.src;
	var musterPicNum = parseInt(fkdnGetNumber(musterPic), 10);
	var anzInZeile = 1;
	for (var i = 1; i < anz; i++){
		if (anzInZeile >= inZeile){
			var neueZeile = document.createElement("TR");
			opa.appendChild(neueZeile);
			parent = neueZeile;
			anzInZeile = 0;
		}
		anzInZeile++;
		var neu = muster.cloneNode(true);
		var neuNum = String(musterPicNum + 1000 + i).substring(2, 4);
		neu.getElementsByTagName("img")[0].src = 
			fkdnMake(fkdnGetPrefix(musterPic), neuNum, fkdnGetSuffix(musterPic));
		parent.appendChild(neu);
	}
}

Erläuterungen zur JavaScript-Datei:

Die Datei enthält ausschließlich Funktionen die im html-Code oder in anderen Funktionen aufgerufen werden. Die Funktionen deren Namen mit fkds_ beginnen sind Methoden des Objektes fkds. Mit den statischen fkdn...- Funktionen (Fred Kasulzke Datei Namen) wird die src-Angabe nach Bedarf auseinandergenommen und zusammengesetzt.

Diashow

Das Objekt fkds merkt sich zunächt in 3 Variablen die Werte, die beim Erzeugen des Objektes übergeben wurden. In picFirst wird die src-Angabe aus dem IMG-Tag (also die URL der Bilddatei - im folgenden, nicht ganz korrekt, Dateiname genannt) gespeichert und mit this.numFirst = parseInt(fkdnGetNumber(this.picFirst), 10); die Nummer aus diesem Dateinamen als Zahl. dsPos ist der zentrale Index. Er wird mit 0 (für das erste Bild) initialisiert.

In allen im html-Code genutzen Methoden wird zunächst die ev. laufende Show mit stop() angehalten, dann der Index (dsPos) eingestellt und das neue Bild mit display() angezeigt.

Die Methode display() bildet den neuen Dateinamen und ändert die src-Angabe des Zielbildes. Dazu errechnet sie zuerst die im Dateinamen enthaltene Nummer mit var neuNum = String(this.numFirst + this.dsPos + 1000).substring(2, 4); indem der Index zur Nummer des ersten Bildes addiert wird. Um führende Nullen zu erhalten wird noch 1000 addiert und vom Ergebnis werden dann nur die letzten zwei Stellen verwendet.

In der Methode start(millisec) wird die automatisch laufende Anzeige mit this.aktiv = window.setInterval(call, inter); gestartet. Dazu wird vorher in der Variable call der nach Ablauf des Intervals vom Browser aufzurufende Code zusammengesetzt. Dazu wird der Name der Objektinstanz benötigt, der beim Erzeugen übergeben wurde. Damit gleich etwas passiert wenn der Benutzer auf START drückt, wird das erste folgende Bild mit showNext() sofort angezeigt.

In der Methode showThumb(img) wird der Index errechnet indem von der Nummer in der scr-Angabe des Thumbnails die Nummer des ersten Bildes abgezogen wird. Bei showNext() und showPrev() wird dsPos um eins herauf- oder runtergezählt bzw. die 0 eingestellt wenn das Ende, oder this.anzshow - 1 wenn der Anfang der Show erreicht wurde um einen ständigen Umlauf der Diashow zu ermöglichen.

Thumbnails

Für die Erzeugung von Thumbnails wird die "normale" Funktion fkdsMakeThumbs(id, anzInZeile, anzGesamt) aufgerufen. Diese Funktion holt sich als Erstes in die Variablen muster, parent und opa die Nodes (DOM - Knoten-Objekte) vom TD-Tag, TR-Tag und TABLE-Tag der im html-Code definierten Tabelle, um sie kopieren oder darin später neue TD- und TR-Nodes einfügen zu können. Mit var musterImg = muster.getElementsByTagName("img")[0]; wird anschließend das IMG-Tag in der Tabellenzelle gesucht und gemerkt und in musterPic und musterNum wird der Dateinamen und die Nummer des ersten Thumbnails geschrieben. anzInZeile ist der Index für die einzelne Tabellenzeile und wird hier auf 1 gesetzt, da das erste kleine Bild schon in der aktuell bearbeiteten Zeile vorhanden ist.

Die im html-Code definierte und per ID übergebene Tabellenzelle <td id="fkdsThumb"> wird in einer Schleife (for (var i = 1; i < anz; i++)) mitsamt des enthaltenen IMG-Tag durch var neu = muster.cloneNode(true); in die Variable neu kopiert. In dieser Kopie wird dann die Nummer im Bilddadeinamen wie in der Diashow hochgezählt. Dann wird sie mit parent.appendChild(neu); in die Tabellenzeile eingefügt.

Am Anfang dieser Schleife wird mit der Bedingung if (anzInZeile >= inZeile) überprüft, ob die Tabellenzeile bereits voll belegt ist. Wenn die maximale Anzahl Spalten für eine Tabellenzeile erreicht ist, wird eine neue Zeile mit var neueZeile = document.createElement("TR"); erzeugt und mit opa.appendChild(neueZeile); in die Tabelle eingefügt. Dann werden parent und anzInZeile auf den neuen Zeilenanfang gesetzt.

Beachten Sie:

Die Funktionen sind getestet unter Windows mit Internet Explorer 6 und Firefox 1.5. Sie können sehr flexibel genutzt werden. Ich stelle die Datei fkds.js hier den Beteiligten und Nutzern der SELFHTML-Community so wie sie ist, ohne jegliche Gewährleistung, zur Verfügung. Für Hinweise zu Browser-Verträglichkeit (z.B. unter MAC-OS) oder gelungenen Anwendungsbeispielen im Netz wäre ich dankbar.

Alle Anpassungen der durch die Funktionen genutzten Images und Tabellen an das Design der jeweiligen Seite im HTML-Code und in CSS sind möglich und notwendig. Durch das Java Script wird keinerlei Formatierung vorgenommen. Es gibt in fkds.js keinerlei Fehlerbehandlung bei z.B. falschem Aufbau der Bilddateinamen oder fehlenden Bildern.

Es können beliebig viele Diashows auf einer Seite kombiniert werden. Dazu unterschiedliche Objektnamen verwenden (diashow1, diashow2, ...). Man kann einfach Tabellen mit vielen Bildern ohne Diashow mit fkdsMakeThumbs() erzeugen (dabei den onclick-Aufruf weglassen). Eine Diashow ohne Thumbs, Links oder Buttons (wie ein animiertes GIF) ist mit fkds() schnell erstellt werden (dabei nach dem fkds-Aufruf noch einen start(millisec) Aufruf codieren und mit dem letzten Bild beginnen). Wenn bei einer Seite sehr sicher alle großen Bilder vom Benutzer angesehen werden können als Thumbnails auch gleich die großen Bilder in den Bowser-Cache "vorgeladen" werden. Dafür in der Thumbnail-Tabelle beim IMG-Tag die gleichen Bilder verwenden wie bei der Diashow und Größenangaben machen um die großen Bilder als Thumbs klein anzuzeigen.

Der Fantasie sind keine Grenzen gesetzt. Bei allen Möglichkeiten sollte aber beachtet werden, daß man mit vielen ev. großvolumigen Bildern die Bandbreite vom Benutzer und vom Webspace strapaziert wird. Mit vielen Diashows auf einer Seite oder mit kurzen Intervallen kann auch ein unangenehmer "zappeliger" Effekt erreicht werden.

nach obennach unten 

Weiterführende Links

Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.

bereichsübergreifende Seite die Datei fkds.js zum speichern
deutschsprachige Seite Beispiel Novaya Insolvanya 1 - klassische Diashow
deutschsprachige Seite Beispiel Novaya Insolvanya 2 - vier bewegte Bilder auf einer Seite mit gemeinsamem Stop-Link
bereichsübergreifende Seite SELFHTML: JavaScript/DOM
bereichsübergreifende Seite SELFHTML: Dynamisches HTML
bereichsübergreifende Seite SELFHTML: eigene Objekte definieren
bereichsübergreifende Seite SELFHTML: DOM Nodes Objektreferenz
bereichsübergreifende Seite SELFHTML: window.setInterval(call, inter)
bereichsübergreifende Seite SELFHTML: parseInt() - Integer (Ganzzahl) aus Text bilden
bereichsübergreifende Seite SELFHTML: String-Funktionen

© 2006 Impressum E-Mail rolf@nakielski.de