pinwand.xsltPinwand-Darstellung einer "Bildergeschichte"2020-06-19HerbertSchiemannh.schiemann@herbaer.deAufbau
Der Kopf der Darstellung bleibt immer gleich.
Der Bereich unterhalb der Kopfleiste (ID c_cont)
ist ein Platz für austauschbare Tafeln.
Es wird immer nur eine Tafel angezeigt.
Manche Tafeln kann man sich als Pinwand vorstellen,
auf der mehrere Textzettel und Bilder mehr oder weniger durcheinander angeheftet sind.
Die erste Tafel (Starttafel, ID c_main) ist eine Pinwand.
Der oberste, anfangs immer frei sichtbare Zettel enthält den Text des ersten Abschnitts.
Weitere Zettel enthalten Abschnittsüberschriften als Verweise auf die Abschnitte
und den Verweis "zurück".
Außerdem ist das erste Bild jedes Abschnitts angeheftet.
Nachfolgend wird für jeden Abschnitt eine Tafel angelegt.
Wenn der Abschnitt kein Bild enhält,
dann enthält das Tafelbild den Abschnittstext,
gefolgt von kleinen Vorschaubildern, die als Verweis auf einen Abschnitt dienen.
Wenn der Abschnitt wenigstens ein Bild enthält,
ist die Tafel eine Pinwand.
Die Pinwand enthält einen Zettel für jeden Unterabschnitt und alle Bilder.
Außerdem gibt es einen Zettel mit den Überschriften anderer Abschnitte als Verweisen
und ein Bild eines anderen Abschnitts ebenfalls als Verweis
Die "fremden" Abschnitte werden beim Laden pseudozufällig gewählt.
Die letzte Tafel ist, bildlich gesprochen, die Leinwand für die Diaschau.
Links unten wird ein Hinweis auf die maschinelle Übersetzung (ID mt)
angezeigt, den die Surferin verbergen kann.
Bilder
Die img-Elemente haben zunächst
kein src-Attribut.
Die Bilddaten sollen verzögert bei Bedarf geladen werden,
damit es nicht zu langen Wartezeiten kommt.
Stattdessen haben sie ein Attribut x-id,
dessen Wert die Bildkennung ist.
Es gibt die folgenden img-Elemente:
Diaschau-Bild
Das Bild der Diaschau mit der ID ds_img.
Bilder in der Übersicht
An der Übersichts-Pinwand hängt das erste Bild eines jeden Bild-Abschnitts.
Gewöhnliche Bilder
Gewöhnliche Bilder eines Bild-Abschnitts hängen an der Pinwand des Abschnitts.
Fremdbilder
Falls es genug Bildabschnitte gibt,
hängt an der Pinwand eines Bildabschnitts das erste Bild eines anderen Abschnitts,
das „Fremdbild”.
Daumenbildchen
Am Ende eines Abschnitts, der nur Text enthältt,
wird ein Block mit kleinen „Daumenbildchen” angefügt,
die die ersten Bilder jedes Bildabschnitts zeigen.
Verwendete ID-Wertehead
Die Kopfzeile
logo
Das Logo-Bildchen in der Kopfzeile
mt
Der Hinweis auf die maschinelle Übersetzung
hmt
Die Schaltfläche: Übersetzungshinweis verbergen
d_cont
Das div-Element, das alle "pinw"-Elemente
(d_main und ein Element zu jedem Abschnitt)
enthält.
d_main
Das umfassende div-Element im body-Element,
das Verweise auf die Abschnitte enthält.
Diese Verweise können Bilder, Textinhalte oder die Titel der Abschnitte sein.
d_SECTNR
Das darstellende div-Element zum Abschnitt SECTNR,
ein Kindelement des div-Elements d_contd_vw
Das div-Element zur Diaschau.
Es enthält zwei überlagernde div-Elemente zur Bild-Darstellung (class
img)
und zur Darstellung der Steuerungs-Elemente (ID d_vw_ctrl).
ds_img
Das Bildelement zur Diaschau.
d_vw_ctrl
Das div-Element mit dieser ID enthält die Elemente zur Steuerung
der „Diaschau”.
Es dient zur Positionierung.
d_links
Das Verweis-Feld, das die Schaltfläche in der Kopfzeile öffnet.
d_hint
Das Hinweis-Feld, das bei einem „Like” ohne Namen angezeigt wird.
Verwendete class-Wörterspacer
Der Leerraum in der Kopfzeile rechts neben dem Titel
pinw
Kennzeichnet ein div-Element ("Pinwand"),
dessen Kindelemente als "Pinwandzettel" dargestellt werden.
Die Reihenfolge und Positionierung der Kindelemente ist pseudo-zufällig.
Diese div-Elemente sind Kinder des Behälters d_cont.
fc
Kennzeichnet als "Pinwandzettel" dargestellte Kindelemente
eines div-Elements mit dem class-Wort pinw.
show
Einige Elemente werden script-gesteuert angezeigt oder verborgen.
Dieses Wort zeigt an, dass das Element angezeigt wird.
hide
Einige Elemente werden script-gesteuert angezeigt oder verborgen.
Dieses Wort zeigt an, dass das Element verborgen wird.
h
Kennzeichnet ein Bild im Hochformat (Porträt).
Das Wort wird vom Attributwert jpg/@fmt übernommen.
q
Kennzeichnet ein Bild im Querformat (Landschaft)
Das Wort wird vom Attributwert jpg/@fmt übernommen.
dias
Kennzeichnet den Abschnitt (div-Element),
der die Diaschau umfasst.
img
Kennzeichnet das div-Element,
in dem das Bild der Diaschau enthalten ist
(ein Kindelement des div-Elements class~="dias").
sym
Kennzeichnet den Listeneintrag mit Verweissymbolen
am Ende eines Verweis-Pinwandzettels.
snim
Kennzeichnet die Tafel zu einem Textabschnitt.
thdiv
Wenn ein Abschnitt keine Bilder enthält,
dann wird aus jedem Abschnitt das erste Bild zur Vorschau ausgewählt.
In die Darstellung des Abschnitts ohne Bilder wird ein div-Element
mit den Vorschaubildern eingefügt.
Dieses Wort kennzeichnet den eingefügten Abschnitt.
thb
Ein Vorschaubild in einem thdiv-Block.
Es enthält ein Attribut X-l mit einem Wert der Form
SECTNR,
das auf den Abschnitt verweist, zu dem das Bild gehört.
rnd
Kennzeichnet die Elemente in der Darstellung eines Bilderabschnitts,
die auf pseudo-zufällig ausgewählte andere Abschnitte verweisen.
fit
Kennzeichnet ein Bild, das in das umgebende Feld einzupassen ist
(object-fit: contain),
verwendet für das Diaschau-Bild ID ds_img.
shrink
Kennzeichnet ein Bild, das auf das umgebende Feld zu verkleinern ist
(object-fit: scale-down),
zu verwenden für das Diaschau-Bild ID ds_img.
clear
Für die Diaschau (ID d_vw): transparenter Hintergrund
grey
Für die Diaschau (ID d_vw): grauer Hintergrund
black
Für die Diaschau (ID d_vw): weiße Schrift auf schwarzem Hintergrund
Attribut x-ltop
Verweis auf das erste Tafelbild der Bildergeschichte
like
„Like”
share
Gefällt-mir-E-Mail
help
Hilfemodus umschalten
links
Schaltfläche „Verweise” rechts in der Kopfzeile
imgfit
Ändert die Anpassung der Bildgröße an den Rahmen.
imgonly
Wechselt in die Nur-Bild-Darstellung und zurück.
backgr
Ändert die Hintergrundfarbe.
store
Speichert die aktuellen Einstellungen lokal.
prev
Ein Verweis zurück zum zuvor angezeigten Tafelbild.
previmg
Zeigt das vorhergende Bild in der Bildlauf-Reihenfolge an.
next
Zeigt das nächste Bild in der Bildlauf-Reihenfolge an.
Dieser und die folgenden Werte gelten nur in der „Diaschau”.
startstop
Startet und beendet den automatischen Bildlauf.
fast
Erhöht die Bildlauf-Geschwindigkeit.
slow
Vermindert die Bildlauf-Geschwindigkeit.
img
Ein Verweis zur Diaschau mit den ersten Bildern aller Abschnitte.
Das anfangs angezeigte Bild wird pseudozufällig gewählt.
back
Ein Verweis zurück zum Tafelbild,
von dem das aktuell angezeigte Tafelbild aufgerufen wurde.
SECTNR
Ein Verweis auf den Abschnitt Nr SECTNR.
iIMGSNR_IMGIX
Verweis zu Bilderschau.
IMGSNR ist der Index eines Bilderabschnitts,
der erste Bilderabschnitt hat die Nummer 0.
IMGIX ist der Index eines Bildes im Abschnitt,
die Zählung beginnt mit 0.
Attribut x-htitle
Der Titel
likebtn
Der Like-Knopf an der linken Seite der Diaschau oder in der Kopfzeile
sharebtn
Der Share-Knopf in der Kopfzeile
linksbtn
Der Knopf zur Verweisliste rechts in der Kopfzeile
imgfitbtn
Der Knopf "Bilddarstellung anpassen" an der linken Seite der Diaschau.
hideheadbtn
Der Knopf "Kopfzeile verbergen" an der linken Seite der Diaschau.
backgrbtn
Der Knopf "Hintergrund" an der linken Seite der Diaschau.
storebtn
Der Knopf "Einstellung speichern" an der linken Seite der Diaschau.
ds_closebtn
Der Knopf "Bilderschau schließen" an der rechten Seite der Diaschau.
ds_previmg
Der Knopf "voriges Bild" an der rechten Seite der Diaschau.
ds_next
Der Knopf "nächstes Bild" an der rechten Seite der Diaschau.
ds_ss
Der Knopf "Start / Stop" an der rechten Seite der Diaschau.
ds_fast
Der Knopf "schneller" an der rechten Seite der Diaschau.
ds_slow
Der Knopf "langsamer" an der rechten Seite der Diaschau.
ds_top
Der Knopf "Übersicht" an der rechten Seite der Diaschau.
ixlinks
Ein Pinwandzettel auf der Übersichtstafel mit Verweisen zu den Abschnitten,
aber nicht der letzte.
ixlinkslast
Der letzte Pinwandzettel auf der Übersichtstafel mit Verweisen zu den Abschnitten.
prev
Schaltfläche „zurück zur vorher angezeigten Ansicht”
am Ende eines Verweis-Pinwandzettels.
iximgvw
Schaltfläche „zur Bilder-Übersicht”
am Ende des letzten Verweis-Pinwandzettels auf der Übersichtstafel.
ixback
Schaltfläche „zur aufrufenden Ansicht”
am Ende des letzten Verweis-Pinwandzettels auf der Übersichtstafel.
m_snim
Pinwandzettel zu einem Textabschnitt auf der Übersichtstafel.
m_il
Ein Bild auf der Übersichtstafel.
fimg
Das Fremdbild in einer Bildabschnitt-Pinwand
rndlist
Die Verweisliste in einer Bildabschnitt-Pinwand
back
Schaltfläche „zur aufrufenden Ansicht”
am Ende des Verweis-Pinwandzettels auf einer Bildertafel.
top
Schaltfläche „zur Übersicht”
am Ende des Verweis-Pinwandzettels auf einer Bildertafel.
pimg
Ein Pinwand-Bild eines Bilderabschnitts.
linksect
Verweis auf einen Abschnitt im Text.
Präfix des Pfades von JavaScript- und CSS-DateienPräfix des Pfades von Bild-DateienMaximale Zahl der Einträge in einem Verweisabschnitt
Mindestzahl der Abschnitte.
Wenn die Zahl der Abschnitte kleiner ist,
wird kein Verweisfeld erzeugt.
Wurzelelement der Bildergeschichte
Sprache ohne weitere Spezifikation
de
Anzahl der Abschnitte
Anzahl der Abschnitte mit wenigstens einem Bild
HTML-Rahmenstylesheeticon
var n_imgsect = ;
var n_sect = ;
var init_d = [
],
", null, null],
];
var prf_img = "";
var tell = {};tell.s = "";
tell.b = "";onload = function() { initialize (); };
onload = function () { initialize (); }
Das div-Element unterhalb des Kopfes dient zu Positionierung.
Ohne diesen Behälter müssten alle "Pinwände" einzeln positioniert werden.
Es werden "Indexabschnitte" mit je höchstens
maxnum_li Listeneinträgen
erzeugt. Jeder Listeneintrag verweist auf einen Abschnitt.
Zusätzlich wird zu jedem Abschnitt ein Bild eingefügt.