Die folgenden Ausführungen beziehen sich auf das auszuführende JavaScript im HTML-Code.

The following explanations refer to JavaScript in HTML code.

1. Eine Instanz der Diashow erstellen

Eine Instanz der Diashow mit der CSS-Id der Diashow erstellen:

1. Create an instance of the slide show

Create an instance of the slide show with the appropriate CSS-Id:

var slideShow = new SlideShow.slideshow("CSS-Id");
Alle folgenden Anweisungen beziehen sich auf die onload()-Funktion
All instructions below refer to the onload() function
window.onload = function()
{	...
	...					
};
2. Initialwerte
Ändern der initialen Werte der Instanz:
2. Initial values
Change initial values of the instance:
slideShow.useAltTextAsTitle = true;
slideShow.nextImageOnClickLarge = true;
slideShow.loadImageUrl = "../images/loading.gif";
slideShow.loadBigImageCount = 10;
slideShow.thumbNailHorizontal = false;
...
Liste der Initialwerte / List of initial values
Beschreibung Wert / Value Default Description
Den Alternativtext von Bildern als Titelattribut im <img>-Tag verwenden.
Der Titel wird jedoch nicht in Vorschaubildern gezeigt.
useAltTextAsTitle false Use the alternative text of images as title attribute within the <img> tag.
However, the title is not shown in thumb nails.
Ein Mausklick auf das große Bild zeigt das folgende Bild. nextImageOnClickLarge false A mouse click on the large image shows the next image.
Anzahl der zu ladenden großen Bilder bei der Dateninitialisierung.
Ein Wert von -1 bedeutet, dass alle großen Bilder sofort bei der Initialisierung geladen werden.
Das kann das Laden der Seite verlangsamen.
loadBigImageCount 5 The count of the first big images to be loaded during data initialization.
A value of -1 means to preload all big images during data initialization.
This may slow down to load the page.
Das Bild, das angezeigt werden soll, während eines großes Bild geladen wird.
Das Bild muß ein existierendes und schnell zu ladendes Bild sein, anderenfalls wird es nicht angezeigt, so lange das große Bild geladen wird.
loadImageUrl null The image which is to be displayed if a large image is loaded.
The image must be an existing image and quickly to be loaded. Otherwise the image will not be shown during as log as the big image is not loaded.
Die Anzahl der Pixel für das Scrollen der Vorschaubilder - der Wert muß im Bereich zwischen 1 und 50 liegen.
Um so höher der Wert ist, umso schneller scrollen die Vorschaubilder.
scrollSpeed 4 The count of pixels to be scrolled - the value must be within the range from 1 to 50.
The larger the value the faster the thumbnails scroll.
Der Anzeigebereich der Vorschaubilder wird für horizontale Vorschaubilder berechnet.
Wenn der Wert auf false gesetzt wird, dann werden die Vorschaubilder untereinander angezeigt.
thumbNailHorizontal true The display area for thumbnail is computed for horizontal display.
If the value is set to false the thumbnails are displayed vertically.
Der CSS-Klassenname für Vorschaubilder.
Wenn ein anderer Name als der Defaultwert verwendet wird, muß die JavaScript-Variable überschrieben werden.
thumbNailClass thumbNail The CSS class name for thumbnails.
If a different name as the default value is used in CSS you must overwrite this JavaScript variable.
Der CSS-Klassenname für das gegenwärtig "aktive" Vorschaubild (das Vorschaubild, das gleichzeitig als großes Bild angezeigt wird).
Wenn ein anderer Name als der Defaultwert verwendet wird, muß die JavaScript-Variable überschrieben werden.
thumbNailActiveClass activeThumbNail The CSS class name for the current "active" thumbnail (the thumbnail which is displayed as large image as well).
If a different name as the default value is used in CSS you must overwrite this JavaScript variable.
Der CSS-Klassenname für das letzte Vorschaubild.
Wenn ein anderer Name als der Defaultwert verwendet wird, muß die JavaScript-Variable überschrieben werden.
thumbNailLastClass thumbNailLast The CSS class name for the last thumbnail.
If a different name as the default value is used in CSS you must overwrite this JavaScript variable.
Der CSS-Klassenname für das erste Vorschaubild.
Wenn ein anderer Name als der Defaultwert verwendet wird, muß die JavaScript-Variable überschrieben werden.
thumbNailFirstClass thumbNailFirst The CSS class name for the first thumbnail.
If a different name as the default value is used in CSS you must overwrite this JavaScript variable.
Wird dynamisch als CSS-Klasse auf die entsprechenden Pfeilobjekte gesetzt, wenn es möglich ist, vorwärts oder rückwärts zu navigieren.
Dadurch ist es möglich, im CSS weitere Attribute zu diesem Objekt hinzuzufügen, z.B. den Cursor auf Pointer setzen.
Wenn ein anderer Name als der Defaultwert verwendet wird, muß die JavaScript-Variable überschrieben werden.
slideEnabledClass slideEnabled Set and removed dynamically as CSS class to the arrow objects.
Therefore it is possible to define further CSS attributes, for instance the cursor as pointer.
If a different name as the default value is used in CSS you must overwrite this JavaScript variable.
3. Die CSS-Klassen initialisieren
3. Initialize the CSS classes
Keine der übergebenen Parameter darf ausgelassen oder auf null gesetzt werden.
None of these parameters must be left out or set to null.
slideShow.initCSS("bigImage", "descriptionBigImage", "thumbNailArea", "bigImagePrevious"
				, "bigImageNext", "thumbNailPrevious", "thumbNailNext");
Funktion initCSS() / Function initCSS()
Beschreibung Parameter Description
CSS-Klasse für das große Bild
Der dazugehörige HTML-Tag muß <img> sein.
bigImageClass CSS class for the big image
The appropriate html tag must be <img>.
CSS-Klasse für die Bildbeschreibung descriptionBigImageClass CSS class for the image description
CSS-Klasse für den Bereich, in dem die Vorschaubilder gezeigt werden. thumbNailAreaClass CSS class for thumb nail area (where thumbnails are shown in)
CSS-Klasse für den Zurück-Pfeil des großen Bildes. bigImagePreviousClass CSS class for the previous arrow of the big image.
CSS-Klasse für den Vorwärts-Pfeil des großen Bildes. bigImageNextClass CSS class for the next arrow of the big image.
CSS-Klasse für den Zurück-Pfeil im Vorschaubereich. thumbNailPreviousClass CSS class for the previous arrow in the thumbnail area.
CSS-Klasse für den Vorwräts-Pfeil im Vorschaubereich. thumbNailNextClass CSS class for the next arrow in the thumbnail area.
4. Die Bilddaten laden

Die einfachste Möglichkeit ist die Nutzung eines Arrays.

4. Load the image data

The simplest way is to use an array.

var slideData = new Array();
var folder = "./images/";
		
slideData.push( new Array(folder + "image1.png", folder + "image1.small.png", "Image1", "Title1", "Lorem ipsum dolor sit amet."));
slideData.push( new Array(folder + "image2.png", folder + "image2.small.png", "Image2", null, "Lorem<br>ipsum dolor sit amet."));
slideData.push( new Array(folder + "image3.png", folder + "image3.small.png", "Image3", "Title 3", "Lorem ipsum dolor sit amet"));

var thumbNailCount = slideData.length;
var data;
		
for (var i = 0; i < thumbNailCount; i++)
{	data = slideData[i];
			
	slideShow.addData( data[0], data[1], data[2], data[3], data[4]);
}
Funktion addData() / Function addData()
Beschreibung Parameter Description
URL des großen Bildes srcBig URL of the big image
URL des Vorschaubildes srcThumb URL of the thumbnail
Text für das alt-Attribut des Bildes altText Text for the alt-attribute of the image
Text für das title-Attribut des Bildes
Wenn der Wert null und useAltTextAsTitle gesetzt ist, wird der Wert des Parameter altText genommen.
titleText Text for the title-attribute of the image
If the value is null and useAltTextAsTitle is set the value of the parameter altText is taken.
Text, der für das große Bild angezeigt wird. Der Text kann HTML-Kodierungen enthalten.
Der Text wird im HTML-element descriptionBigImageClass angezeigt.
descriptionText Text to be displayed for the big image. The text can contain HTML code as well.
The text is shown in the HTML-element descriptionBigImageClass.
5. Große Bilder im Hintergrund laden (Preload)

Wenn nicht die Variable loadBigImageCount auf -1 gesetzt worden ist (alle großen Bilder sofort laden), dann können die großen Bilder nach der Initialisierung im Hintergrund geladen werden.

Das beschleunigt das spätere Navigieren durch den Benutzer.

Dazu wird die Funktion loadBigImages() aufgerufen.

5. Load big images in background (preload)

If the variable loadBigImageCount was not set to -1 (load all big images at once) then it is possible to load all big images in background. This can be done after the image data were loaded.

This speeds up the navigation by the user later on.

Call the function loadBigImages() for it.

Diese Funktion ist optional, aber empfohlen.
The function is optional but recommended.
var loadBigImages = function loadBigImages()
{	var endTime = new Date();

	if (endTime - startTime > 1000 // wait 1000 milliseconds until force to load big images
				|| slideshowHorz.getThumbNailCount() >= thumbNailCount
		)
	{	slideShow.loadBigImages();

		clearInterval(timerID);
	}			
};
		
var startTime = new Date();
var timerID = setInterval(loadBigImages, 200);
Callback-Funktionen beim Ändern eines großen Bildes

Wenn es notwendig ist, vor oder nach dem Anzeigen eines neuen großen Bildes weitere JavaScript-Kommandos auszuführen, können Callback-Funktionen verwendet werden.

Im Beispiel werden diese Funktionen verwendet, um die Textbreite an die aktuelle Bildbreite anzupassen und das Bild langsam einzublenden (fade in).

Die Funktionen werden in dem Beispiel, das hier heruntergeladen werden kann, verwendet.

Callback function if the big image is changed

Sometimes it is necessary to execute further JavaScript commands before or after a new big image iss displayed. In that case use the callback functions built in.

The example shows how it works for the adaptation of the image text width according to the width of the current big image and for the fade-in effect as well.

The functions are used in the example which can be downloaded here.

Diese Funktionen sind optional. Sie sollten eingerichtet werden, bevor die ersten Bilddaten übergeben werden.

Beide Funktionen haben die selbe Parameterliste.

Die Variablennamen in der Diashow-Instanz lauten:

  • vor der Änderung des großen Bildes: callBackFunctionBeforeImageChange
  • nach der Änderung des großen Bildes: callBackFunctionOnImageChanged

These functions are optional and should be implemented before the image data are to be initialized.

Both functions have the same parameter list.

The names oft the variables in the slide show instance are:

  • before the big image is to be changed: callBackFunctionBeforeImageChange
  • after the big image was changed: callBackFunctionOnImageChanged
// Callback-Funktion bevor das Bild sich ändert
// callback before image will change
slideShow.callBackFunctionBeforeImageChange = function callbackBeforeImageChange(imgData, index)
{	
	// hier eigenen Code schreiben
	// write your own code here
	... 	
};

// Callback-Funktion, nachdem sich das Bild geändert hat
// call back after image changed
slideShow.callBackFunctionOnImageChanged = function callbackImageChanged(imgData, index)
{	
	// hier eigenen Code schreiben
	// write your own code here
	... 	
};
Callback-Funktion für Änderungen beim großen Bild / Callback functions if the big image changes
Beschreibung Parameter Description
Das Imageobjekt. Siehe untere Tabelle für Details. imgData The image object. See table below for details.
Die Position in der Diashow, beginnt mit 0. index The position in the slide show. Starts with 0.
Imageobjekt / Image object
Beschreibung Parameter Description
JavaScript-Image-Objekt für das große Bild bigImageObject JavaScript-Image object for the big image
URL des großen Bildes srcBig URL of the big image
URL des Vorschaubildes srcThumb URL of the thumbnail
Der alt-Text, wie er in der Function addData() übergeben worden ist alt The alt text as passed in function addData()
Der title-Text, wie er in der Function addData() übergeben worden ist
Wenn useAltTextAsTitle == true gesetzt wurde und der title-Text wurde nicht gesetzt, dann erscheint hier der alt-Text (<img title="alt text" .. />).
title The title text as passed in function addData()
If set useAltTextAsTitle == true and the title text is not set than the alt text occurs here (<img title="alt text" .. />).
Beschreibungstext, wie er in der Function addData() übergeben worden ist description Description text as passed in function addData()
Einschränkungen
  • Die Klasse bigImage muss im HTML ein <img>-Element sein.
  • Das große Bild (Klasse bigImage) darf im HTML-Code kein Kind der Bildbeschreibung (Klasse descriptionBigImage) sein.
  • Die Klasse slideArea benötigt folgende CSS-Attribute:
    • position: relative
    • feste Breite und Höhe in Pixeln
    • Die Klasse thumbNailArea als Kind dieser Klasse im HTML-Code muß das CSS-Attribut position auf den Wert absolute setzen.
  • Für eine vertikale Diashow muß die Klasse thumbNail das CSS-Attribut display auf den Wert block setzen.
Limitations
  • The class bigImage must be an <img> element in HTML code.
  • The big image (class bigImage) must not be a child of the image description (class descriptionBigImage) in HTML code.
  • The class slideArea requires these CSS attributes:
    • position: relative
    • fixed width and height in pixel.
    • The class thumbNailArea as child of this class in HTML code mußt set the CSS attribute position to absolute.
    • A vertical slide show requires the CSS attribute display with the value block for class thumbNail.