Peter's Web Galerie (Thumbnailshow und Slideshow)

Warum eine eigene Thumbnailshow und Slideshow für Bild-Präsentationen im WWW ?
Es gibt doch Dropbox, Google Drive, Microsoft OneDrive, Amazon Drive, und viele andere Cloud-Anbieter.
Jeder, der damit zufrieden ist und die Nutzungsbedingungen akzeptiert, braucht nicht weiterzulesen.
Auch alle anderen, die nur Interesse an lokalen Slideshows auf dem eigenen Rechner haben, sind nicht betroffen.
Aber alle, die ihre Bilder bzw. Slideshows gerne in der Cloud speichern würden, aber trotzdem die volle Kontrolle und Rechte über ihre Bilder behalten möchten, benötigen eine Private Cloud und eine Web Galerie zum präsentieren.
Die oben gezeigten Screenshots sind aus folgender Web Galerie.

Warum habe ich eine eigene Web Galerie implementiert ?

Ich will meine Slideshows nicht nur auf einem lokalen Rechner präsentieren, sondern im WWW!
Ich will die volle Kontrolle und auch alle Rechte an meinen Bildern behalten!
Da habe ich Bedenken bei allen kostenlosen Cloud-Anbietern.

Ich will Thumbnailshows und Slideshows auch bei vielen Bildern mit geringem Aufwand erzeugen können.
Ich will Thumbnailshows und Slideshows automatisch generieren.
Ich will Bild-Titel (oben) und Bild-Beschreibung (unten) aus den Metadaten der Bilder extrahieren.
Damit kann ich erreichen, daß die generierte Slideshow nicht nachträglich editiert werden muß.

Was sind Bild-Metadaten:

Zusätzlich zum eigentlichen Bild enthalten die Bilddateien diverse Informationen im Kopfbereich.
Welche Auswahl dieser Metadaten für die Gestaltung von Bildtitel und Bildbeschreibung zur Verfügung stehen siehe ganz unten.

EXIF: Informationen, die meistens schon durch die Kamera hinterlegt werden.
z.B. Aufnahmezeitpunkt, Blende, Entfernung, GPS-Position, .....
IPTC: Informationen, die durch das Bildbearbeitungsprogramm hinterlegt werden.
z.B. Copyright, Bildtitel, Bildbeschreibung, Land, Stadt, .....
XMP: Neues Format (XML) für IPTC-Daten mit zusätzlichen Informationen.
z.B. Bewertung, Beschriftung, Stichwörter, .....

Ich organisiere und bearbeite meine Bilder mit Adobe Lightroom, da werden auch für Slideshows nützliche Daten wie Bildtitel und Bildbeschreibung erfaßt.
Viele Informationen hat schon die Kamera hinterlegt, z.B. Aufnahmezeitpunkt, Aufnahmeort ...
Lightroom kann aus den Bildern dann ansprechende lokale Slideshows generieren, und zwar wahlweise als .pdf, .mp4 oder .jpg.
Als Titel (oben) bzw. Caption (unten) können beliebige Metadaten eingeblendet werden, Beispiel.
Lightroom bietet auch mehrere Web-Galerien an, diese können aber kaum an persönliche Wünsche angepaßt werden.
Auch im WWW habe ich keine Web Galerie gefunden, die meinen Vorstellungen entspricht.

Also habe ich angefangen zu programmieren, aber man muß ja nicht alles neu erfinden:

Grundlegende Idee von der better simple slideshow
Metadaten Grundlagen von exif-js (Jakob Seidelin)
Icons von Font Awesome
Wischgesten-Unterstützung von hammer.js
Alles drumherum mit HTML5, CSS3 und Vanilla Javascript ....

Argumente für den eigenen Einsatz

Die Bilder liegen auf dem eigenen Rechner bzw. im eigenen Webspace, z.B. einem NAS.
Wichtig für alle, die entscheiden wollen, wo ihre Bilder gespeichert sind.
Für Bild-Titel (oben) und Bild-Beschreibung (unten) können die Bild-Metadaten ausgewertet werden.
Das nachträgliche Editieren der Slideshow erübrigt sich, dies ist besonders bei vielen Bildern willkommen.
Das funktioniert aber nur, wenn die Bilder mit einem Bildbearbeitungsprogramm bearbeitet wurden, z.B. Lightroom.
Wahlweise können aber auch Titel und Beschreibung manuell für jedes Bild in der Slideshow editiert werden.
Die Anpassung an die eigenen Vorstellungen erfolgt durch eine Parameterdatei. (slideShowParams.bat)
Nach dem Anpassen "makeSlideShow.bat" aufrufen, um die Thumbnailshow und die Slideshow zu generieren.
Thumbnailshow und Slideshow werden durch ein Script automatisch generiert. (makeSlideShow.bat)

Voraussetzungen, Konventionen

Bilder vorher mit Lightroom oder ähnlichem Programm bearbeiten, mit Titel und Beschreibung, und in die 3 Verzeichnisse exportieren.
Bilder mit 3-stelliger Laufnummer im Verzeichnis: \slides\
Empfehlung Bildgröße: 1024px (lange Kante)
Evtl. größere Bilder mit gleichem Namen zum Download im Verzeichnis: \oriPics\
Empfehlung Bildgröße: 1920px (lange Kante)
Thumbnails mit gleichem Namen im Verzeichnis: \thumbnails\
Empfehlung Bildhöhe: 150px
Für eigene Webseiten ist bei Verwendung des Google Static Maps API's ein eigener KEY erforderlich.
Dieser kann ganz einfach bei Google angefordert werden. Diesen Key in slideShowParams.bat eintragen als: GOOGLEMAPSKEY
Aktueller Webbrowser für das Betrachten (HTML5, CSS3).

Implementierte Funktionen

Vorwärts- bzw. Rückwärtsblättern, auch mit Wisch-Gesten bei Touchscreens.
Zurück an den Anfang (erstes Bild).
Automatisches Abspielen, auch mit zufälliger Reihenfolge, siehe F1 unten.
Bild an die Displaygröße anpassen, wahlweise auch vergrößern.
Vollbildmodus (ideal für Vorführungen).
Bild runterladen, wahlweise auch in voller Größe (wenn \oriPics\).
Bild drucken.
Bild-Metadaten verwenden für Titel und Beschreibung.
Ausgewählte Bild-Metadaten anzeigen.
Alle Bild-Metadaten runterladen (EXIF, IPTC, XMP).
Aufnahmeort mit Google Maps anzeigen (wenn Positionsdaten verfügbar).
Benutzeroberfläche deutsch, englisch, ...., einfach anpassbar. (\js\strings.js)
Sondertaste F1: Abspielmodus wählen. (Standard: vorwärts bis zum Ende)
Sondertaste F2: Anzeigedauer Bild im Abspielmodus. (Standard: 3 sec)
Sondertaste F3: Überblendzeit wählen. (Standard: 1 sec)
Sondertaste F4: Wartezeit bei manuellem Bildwechsel wählen. (Standard: 1 sec)

Getestete Browser und Plattformen (aktuellste Versionen)

Windows 10:Firefox, Chrome, MS-IE, MS-Edge, Opera ... alle OK
Android 6:Firefox OK ... Chrome ohne Datensparmodus.
Linux:Firefox OK
Apple OS X:Safari, Chrome OK
Apple iOS:nicht getestet

Lokaler Test auf dem eigenen Rechner

Wenn man die Slideshow lokal auf dem eigenen Rechner ohne Webserver testen will, erhält man evtl. eine CORS-Fehlermeldung, daß die Bild-Metadaten nicht ausgelesen werden können.
Lösung für Google Chrome: Aufruf-Parameter
Chrome_ohne_CORS.bat ⇒⇒ "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\Temp %1
Lösung für Mozilla Firefox: Konfigurationsparameter in about:config
security.fileuri.strict_origin_policy ⇒⇒ false
Es gibt auch ein Firefox-Plugin
Evtl. weitere Aufforderungen verbieten.

Kurzanleitung für eigenen Einsatz

Diese Software darf privat genutzt werden, wenn keine kommerziellen Interessen damit verbunden sind.
Bitte prüfen Sie auch die evtl. Rechte der oben erwähnten verwendeten Libraries.
Wenn Sie diese Software verwenden, dann akzeptieren Sie, daß kein Service und keinerlei Gewährleistung bzw. Garantie geleistet wird.
Sie verwenden diese Software auf Ihr eigenes Risiko.

Download (kleine Demo-Show ist enthalten)
Entpacken nach: ./slideShow/
Wir finden folgende Verzeichnisse:
js: Javascript- und Sprach-Dateien
evtl. eigene Sprachdatei strings_xxx.js umbenennen in strings.js
css: Style Dateien
fonts: Font Dateien
icons: z.B. Spinner
help: Hilfe-Dateien
evtl. eigene Hilfedatei help_xxx.html umbenennen in help.html
slides: Bilder (Demo) ... für eigene einfache Show ersetzen ...
thumbnails: Thumbnails (Demo)
oriPics: evtl. größere Bilder zum Download (Demo)
Weiters finden wir folgende Dateien:
makeSlideShow.bat: Script zum Generieren der Thumbnailshow (index.html) und der Slideshow (slideshow.html)
slideShowParams.bat: Parameter für die Generierung (reinschauen und testen)
Mit makeSlideShow.bat generierte Dateien:
index.html: Thumbnailshow
slideshow.html: Slideshow

Mit makeSlideShowSimple.bat generierte einfache Demo ohne Metadaten:
indexSimple.html: Thumbnailshow
slideshowSimple.html: Slideshow ohne Metadaten
Das Static Google Maps API:
Um den Aufnahmestandort eines Bildes anzuzeigen, wenn Positionsdaten vorhanden sind, wird das Static Google Maps API verwendet. Dafür ist für eigene Webseiten ein eigener KEY erforderlich.
Dieser kann ganz einfach bei Google angefordert werden. Diesen Key in slideShowParams.bat eintragen als: GOOGLEMAPSKEY

Die wichtigsten Einstellungen in der 'slideShowParams.bat'

Es sind Beispiele eingetragen:

TITEL=HdS Faschingsgaudi 2016 Seitentitel fuer Thumbnailshow und Slideshow
BILDNAME=FaschingHdS2016_ Name der Bilder ohne Nummernteil
BILDANZ=10 Anzahl der Bilder, max. 999
SCRIPTSDIR=./ lokales Script und Style Basisverzeichnis,
wenn nur eine Slideshow, siehe Demo
SCRIPTSDIR=../slideShow/ gemeinsames Script und Style Basisverzeichnis,
wenn mehrere Slideshows, Beispiel siehe unten
ORIPICDIR=oriPics evtl. Verzeichnis fuer große Bilder zum Download, sonst false
ENLARGE=true evtl. Bilder bei grossem Display vergroessern
SENOTTO=false evtl. Thumbnail-Show fuer www.senotto.de
GOOGLEMAPSKEY="##########" evtl. ihr persönlicher GoogleMaps-Key
ADDTITLE=true Bildtitel mit Metadaten ueber dem Bild
Die Titelzeile wird wie folgt zusammengesetzt:
TITEL_LI_1, TITEL_LI_2 TITEL_RE_1, TITEL_RE_2
ADDCAPTION=true Bildcaption mit Metadaten unter dem Bild
Die Beschreibungszeile wird wie folgt zusammengesetzt:
CAPTION_LI_1, CAPTION_LI_2 CAPTION_RE_1, CAPTION_RE_2
Einfaches Beispiel, Beschreibung siehe unten:
TITEL_LI_1="title"
CAPTION_LI_1="desc"
CAPTION_RE_1="date"

Bespiel für mehrere Slideshows:

Der Ordner "slideShow/" kann unverändert bleiben.
Parallel dazu richten wir für jede Slideshow einen Ordner ein.
Diese enthalten Unterordner für die Bilder: "slides/", "thumbnails/" und evtl. "oriPics/".
Weiters benötigen wir 2 Dateien: "makeSlideShow.bat" und "slideShowParams.bat".
Die Datei "slideShowParams.bat" muß an die Slideshow angepaßt werden, dann kann mit "makeSlideShow.bat" die Slideshow und die Thumbnailshow generiert werden.

Beschreibung der unterstützten Metadaten

Welche Metadaten in den Bildern vorhanden sind hängt von der Kamera und vom Bildbearbeitungsprogramm ab.
Es wird folgende Auswahl aus den EXIF, IPTC und XMP Metadaten unterstützt:

    • name:         Bildname                      (Sonderfall)
    • title:        Bildtitel                     (XMP | IPTC)
    • headline:     Bildüberschrift               (XMP | IPTC)
    • desc:         Bildbeschreibung, Caption     (XMP | IPTC | EXIF)
    • byline:       Künstler                      (IPTC)
    • creator:      Ersteller                     (XMP)
    • rights:       Copyright                     (XMP | IPTC | EXIF)
    • date:         Aufnahmedatum                 (EXIF)
    • time:         Aufnahmezeit                  (EXIF)
    • make:         Kamera Hersteller             (EXIF)
    • model:        Kamera Modell                 (EXIF)
    • artist:       Fotograf                      (EXIF)
    • userComment:  Benutzer Kommentar            (EXIF)
    • focalLen:     Objektiv Brennweite           (EXIF)
    • fNumber:      Objektiv Blende               (EXIF)
    • subjDist:     Objektiv Entfernung           (EXIF)
    • expTime:      Kamera Belichtungszeit        (EXIF)
    • expBias:      Kamera Belichtungskorrektur   (EXIF)
    • ISOSpeed:     Kamera ISO Empfindlichkeit    (EXIF)
    • pixelX:       Kamera Bildbreite             (EXIF)
    • pixelY:       Kamera Bildhöhe               (EXIF)
    • latGrad:      GPS Latitude (Breite)         (EXIF)
    • lonGrad:      GPS Longitude (Länge)         (EXIF)
    • ele:          GPS Höhe                      (EXIF)
    • country:      Land                          (XMP | IPTC)
    • province:     Provinz                       (XMP | IPTC)
    • city:         Stadt                         (XMP | IPTC)
    • location:     Ort                           (XMP | IPTC)
    • rating:       Bewertung, z.B.: "4"          (XMP)
    • label:        Markierung, z.B.: "Grün"      (XMP)
    • exifVers:     EXIF Version                  (EXIF)
    • creaTool:     Foto-Software, z.B: Lightroom (XMP)

Homepage aktiver Ottobrunner Senioren