Before/After Images: Fotovergleich auf Website publizieren
Variante 1: Vergleichsfotos übereinander/nebeneinander
Die beiden Vergleichsfotos werden übereinander oder nebeneinander angeordnet auf der Website angezeigt.
Beispiel:
Before/After Images Galerie
Vorteile:
- Einfache Umsetzung
- Anforderungen an die Passgenauigkeit der beiden Fotos sind weniger hoch als bei Verwendung eines Schiebers (Varianten 2 und 3).
Nachteile:
- Interaktivität fehlt.
- Direkter Vergleich der beiden Fotos ist schwieriger als bei Verwendung eine Schiebers (Varianten 2 und 3).
Variante 2: Juxtapose.js
Vorher/Nachher-Fotovergleich mit Schieber.
Auf der Juxtapose.js-Website können in einer Eingabemaske zwei Fotos ausgewählt und pro Foto die Angaben
Label und
Credit erfasst werden. Nach einem Click auf Preview/Publish werden erzeugt:
- Ein Share Link für den Aufruf des Vergleichs in einem neuen Browser-Fenster
- Code für die Einbettung des Vergleichs in eine HTML-Seite. Wenn dieser Code in eine HTML-Seite eingefügt wird, wird der Vorher/Nachher Fotovergleich innerhalb der Seite angezeigt.
Beispiele: Juxtapose.js - Website
Vorteile:
- Relativ einfach zu implementieren.
Nachteile:
- Die Vergleichsfotos werden auf externem Webserver gespeichert.
- Unklar ist, ob die Verwendung von Juxtapose.js Auswirkungen auf die Bildrechte hat.
- Anforderungen an die Passgenauigkeit der beiden Fotos sind höher als bei Variante 1.
Variante 3: jQuery Before/After Plugin
Mit diesem Plugin können die Vorher/Nachher-Fotovergleiche zu 100% (d.h. ohne Link auf einen anderen Websever wie bei Variante 2) auf einem Webserver publiziert werden.
Beispiele:
-
GletscherVergleiche.ch (Aufruf von Desktop aus).
Vorteile:
- Alle Daten und Fotos sind auf einem Webserver gespeichert.
- Realisierung von Mehrfachvergleichen ist problemlos möglich.
Nachteile:
- Implementation etwas aufwändiger als bei den andern Varianten.
- Anforderungen an die Passgenauigkeit der beiden Fotos sind höher als bei Variante 1.