Übersicht

Die Dateien galery.xslt (Text), galery.css (Quelltext) und galery.js bestimmen die "Galerie-Darstellung" einer Bildergeschichte der Website kleider.herbaer.de.

Die Javascript-Datei galery.js passt das Layout an die Fenstergröße an, verwaltet das "aktuelle Bild" und definiert hilfreiche Tastenkürzel. Sie setzt voraus, dass die Javascript-Datei common.js (Quelltext) geladen ist.

var cur_imglink;     // aktueller Bildverweis
var popup_help;      // Popup "Tastenhelfer"
var popup_about;     // Popup "Über ..."
var min_width;       // Anfängliche Breite des Body-Elements ist die Mindestbreite
var min_height;      // Anfängliche Höhe des Body-Elements ist die Mindesthöhe
var title_height;    // Anfängliche Höhe der Titelleiste
var style_body;      // "Style" der Gesamt-Seite
var style_title;     // "Style" der Titelleiste
var style_galery;    // "Style" der "Galerie" (Bilder-Feld)

on_mouseover (event)
on_focus (event)
onKeydown (event)
initialize_galery ()
onResize (event)
  

Variable und Funktionen

cur_imglink

Wenn ein Bildverweis (a-Element) fokussiert wird, wird er zum neuen aktuelle Bildverweis (cur_imglink, on_focus). Ein Bildverweis kann mit den Standard-Methoden des Browsers fokussiert werden. Es wird aber auch fokussiert, wenn der Mauszeiger auf einen Bildverweis läuft.

Die Tasten S, N und K bestimmen aus dem aktiven Bildverweis das Verweisziel.

popup_help

Ein Popup-Fenster ("Tastatur-Steuerung", Kennung help) mit einer Zusammenstellung der Tasten-Funktionen. Es wird mit der Taste H geöffnet und geschlossen.

popup_about

Ein Popup-Fenster ("Info-Fenster", Kennung about) mit Angaben zu den Mitwirkenden der Website. Es wird mit der Taste I geöffnet und geschlossen. Auch ein Klick auf das Logo öffnet das "Info-Fenster".

min_width

Die Mindestbreite des body-Elements in Pixeln. Der Wert ist der anfängliche Wert gemäß den CSS-Regeln (galery.css (Quelltext)). min_width wird in der Funktion onResize benutzt.

min_height

Die Mindesthöhe des body-Elements in Pixeln. Der Wert ist der anfängliche Wert gemäß den CSS-Regeln (galery.css (Quelltext)). min_height wird in der Funktion onResize benutzt.

title_height

Die Höhe der Titel-Leiste (div-Element, ID div_title) in Pixeln. Der Wert ist durch CSS-Regeln (galery.css (Quelltext)) bestimmt. title_height wird in der Funktion onResize benutzt.

style_body

Das style-Objekt des body-Elements. Es wird in der Funktion onResize benutzt.

style_title

Das style-Objekt der Titel-Leiste (div-Element, ID div_title). Es wird in der Funktion onResize benutzt.

style_galery

Das style-Objekt des Bilder-Feldes (div-Element, ID div_galery). Es wird in der Funktion onResize benutzt.

on_mouseover

Dieser Ereignisbehandler wird aufgerufen, wenn der Mauszeiger auf einen Bildverweis (a-Element) läuft. Das a-Element wird fokussiert. Dadurch wird der Ereignisbehandler on_focus aufgerufen.

on_focus

onResize

onKeydown

Die Funktion onKeydown behandelt das Niederdrücken (keydown) einiger Tasten oder einen Klick auf ein span-Element im Fenster "Befehle". (popup_help)

Wenn eine Zusatztaste (Cntrl, Shift, Meta, Alt) gedrückt ist, macht die Funktion nichts. Die folgenden Tasten werden behandelt:

K

Wenn es einen aktuellen Bildverweis (cur_imglink) gibt, wird das kleine Bild zum aktuellen Bildverweis angezeigt.

N

Wenn es ein aktuellen Bildverweis (cur_imglink) gibt, wird das Bild zum aktuellen Bildverweis in normaler Größe angezeigt.

T

Die Taste T wechselt im aktuellen Browser-Fenster zur Bildergeschichte in normaler Ansicht. Wenn es einen aktuellen Bildverweis (cur_imglink) gibt, werden das zugehörige Bild im zugehörigen Abschnitt der Bildergeschichte angezeigt.

X

Die Taste X wechselt im aktuellen Browser-Fenster zur Hilfe zur Galerie-Ansicht.

I

öffnet und schließt das "Info-Fenster" (popup_about

H

öffnet und schließt das Fenster "Tastatur-Steuerung" (popup_help

S

wechselt im aktuellen Browser-Fenster zur Bilderschau der Bildergeschichte mit zufälliger Bildauswahl in der Ansicht ohne Rahmenelemente. (story.xml#rndimgshow)

C

Schließt die geöffneten Popup-Fenster ("Info-Fenster" popup_about und "Tastatur-Steuerung" popup_help).

initialize_galery

Die Funktion initialize_galery erzeugt die Javascript-Objekte popup_help und popup_about, initialisiert die Variablen mit Ausnahme der Darstellungsmaße min_width, min_height und title_height und ordnet die Ereignisbehandler (on_mouseover, on_focus, onKeydown und onResize) zu. Zur Anpassung an die Fenstergröße ruft sie onResize auf.