Showtime!

Mit der Extension „ishow“ lässt sich in Datenstrom Yellow mit minimalem Aufwand eine flotte Bildershow mit Seitenverknüpfungen erstellen.

Dieser Artikel ist für Yellow überholt, da seit Version 0.815 keine meiner dafür entwickelten Extensions mehr gewartet wird. Diese stehen jedoch weiterhin bei GitHUB für Interessierte zur Übernahme bereit.

Die hier gezeigten Animationen basieren auf dem gleichen Konzept, doch wurden sie mit »OffsiteEdit« erzeugt, die Einstellungen darauf angepasst.

Den Ursprung hat diese Extension auf meiner Homepage „NoSi.de“, für die ich ein bisschen Bewegung, jedoch ohne aufwändige Bibliotheken realisieren wollte. Herausgekommen ist eine CSS-Animation. Die Idee, das mit einigen Paramtern als Extension zu generieren, war schnell realisiert. Sie dümpelte jedoch vor sich hin, denn ich fand keine Lösung, wie ich Verknüpfungen der Bilder zu Seiten ohne JavaScript realisiere.

Das galt bei Yellow. Mit der Eigenentwicklung »OffisiteEdit« geht es ohne Javascript, weshalb die (umfangreiche) dafür erforderliche Lösung dort hinfällig und hier entfernt wurde.

Die Extension ist ziemlich umfangreich geworden. Sie bietet acht Animationsvarianten. Für jede wird mit Parametern eine individuelle CSS-Datei erzeugt. Was dynamisch erfolgen muss, da die Anzahl der Bilder darauf Einfluss hat. Ich habe mir ein paar „Presenter“ angesehen davon die Grundregeln abgeleitet:

Für jedes Bild wird ein und die selbe Animation verwendet.
Die Animationsdauer pro Bild ergibt die Gesamtdauer der Animation
Die Animationen werden mit Verzögerung auf die Bilder angewandt, woraus eine Präsentation entsteht.
Den größten Teil der Zeit befindet sich jedes Bild „im Ruhezustand“, es muss dafür „weggeräumt“ werden.

🔍

Die Präsentationsphasen:
A: Animationsphase
B: Ruhephase
C: Präsentationsdauer, grün: überlagernde Ruhephasen

Den zeitlichen Verlauf zeigt die Grafik. Es gibt eine Einblend-, Anzeige- und Ausblendphase(A), für den Rest der Show ist „Sendepause“ (B). Dieses Muster wird um die Länge der Animation verschoben, fertig ist die Präsentation (C). Die Animation entsteht durch die Verschiebung der Bewegungen zueinander, die „hinten übrig bleibenden“ Ruhephasen verschieben die Präsentation nach dem Start entsprechend vom Anfang („Übertrag“ ist grün).

Damit es fluffig aussieht, werden bei „ishow“ die nachfolgenden Bilder so verzögert, dass deren Einblendung mit der Ausblendung des Vorgängers zusammenfällt.

Für eine animierte Schautafel dient nach der Installation der Extension ein simpler Befehl:

[ishow /verzeichnis/]

Mit dieser Minimal-Eingabe werden alle Bild-Dateien aus dem angegebenen Verzeichnis in der Präsentation angezeigt. Konzeptbedingt kann nur eine Präsentation pro Seite verwendet werden, deshalb werden die Varianten auf Demoseiten präsentiert. Die vollständige Konfiguration ist umfangreicher:

[ishow /verzeichnis/ Anzeigedauer Blenddauer Typ Linkpfad Rahmen]

Den Beispielen ist jeweils der abstrahierte Befehl zugeordnet, womit sich die Parameter erschließen lassen. Die Präsentation nimmt grundsätzlich die verfügbare Breite in Anspruch, für die Höhe ist das erste Bild maßgeblich. Ausgehend von dessen Größe werden alle weiteren Bilder zentriert im verfügbaren Platz angezeigt. Das erste Bild in der Reihe verschieden großer Bilder sollte daher das Größte sein.

Varianten

Mit einer Datei links.ini können Verweise (s.o.) optional für jedes Bild hinterlegt werden.

Gildname-ohne-Extender=Linkpfad ⟨absolut oder Rootbasiert⟩

Wenn ein Zielpfad übergeben wird, werden die Bilder damit „anklickbar“ und öffnen den mit einem Bild verknüpften Link. Die nachfolgende Demo verweist auf statische Test-Seiten:

[ishow /verzeichnis/ 3 0.3  fly zielpfad]

Mit dem hier skizzierten Basis-Wissen können ggf. leicht weitere „Showeffekte“ mittels @keyframe-CSS realisiert werden. Wenn sie mir zugeschickt werden erweitere ich die Extension gern entsprechend, damit zusätzlich erstellte Animationen „update-sicher“ sind.