Das Gestern mit dem Jetzt vergleichen: Für eine Online- Bildgeschichte ideal. Wir erklären, wie Sie Schieberegler-Bilder herstellen: um zwischen dem Davor und Danach zu wechseln. (aus unserer medium magazin Serie Technik-Tipps für Journalisten)
von Thomas Strothjohann

Vorher-nachher-Bilder sind nicht nur bei Werbung für Schlankmacher sinnvoll. Sie können auch helfen, die Gewalt eines Tsunamis zu demonstrieren. Zu diesem Zwecke setzte sie die „New York Times“ 2011 in einer technisch avancierten Form ein: Mit einem Schieberegler können die User das Davor mit dem Danach vergleichen.

Zum Jahrestag des Unglücks im März 2012 setzte auch „Zeit Online“ auf den Schieberegler-Trick – der sich übrigens auch für allerlei andere Vorher-nachher-Geschichten anbietet, um sie online visuell anders umzusetzen. Das können Sie jetzt auch – und wir demonstrieren Ihnen, wie es geht.

Alles, was Sie benötigen, ist ein kostenloses Plugin namens „BeforeAfter“.

1. Die Bilder

Zuerst müssen Sie Bilder haben, deren Seitenlängen und Perspektive übereinstimmen. Je genauer die Bilder „aufeinanderpassen“, desto eindrucksvoller ist der Effekt.

2. Die Vorbereitung

Das Plugin ist kostenlos. Es basiert auf der Javascript-Befehlsbibliothek jQuery. Viele dynamische Elemente aktueller Websites basieren darauf. Damit das Plugin funktioniert, muss es auf diese Bibliothek auch zurückgreifen können. Falls sie auf Ihrer Website nicht schon eingebunden ist, können Sie das nachholen – ein paar Code- Zeilen im Post genügen. Da die Bibliothek auf einem Google- Server liegt, funktioniert sie nur bei aktiver Internetverbindung. [code]
[/code] Achtung: Bei WordPress müssen Sie den Code im HTML-Modus des Artikel-Editors eingeben.

3. Das Plugin

Laden Sie das Plugin herunter und entpacken Sie es. Relevant sind für Sie die drei Grafikdateien (zwei Mal .png, ein Mal .gif) für den Schieberegler und die JavaScript-Datei jquery. beforeafter-1.4.min.js. Das „min“ am Ende bedeutet, dass es sich dabei um die komprimierte Version handelt – sie kann schneller geladen werden. Wenn Sie Änderungen am Code vornehmen wollen, sollten Sie die übersichtlichere, kommentierte Version (ohne .min) nehmen. Laden Sie die vier Dateien auf Ihren Server.

4. Und nun: einbinden

Jetzt also Plugin einbinden und aktivieren. Dazu müssen Sie den Pfad zu der hochgeladenen JavaScript-Datei und den Grafikdateien in folgendem Code anpassen: [code]

[/code]

5. Der Effekt

Zum Schluss müssen Sie noch die Vorher-nachher-Fotos hochladen und nach folgendem Schema in das Dokument einbinden. Für die Browser Safari und Chrome müssen Sie die Breite und Höhe Ihrer Fotos angeben. Die Bilder sind jeweils von einem div umschlossen, die wiederum von einem div mit der ID “container“ zusammengehalten werden. Wenn Sie die ID ändern, muss diese auch bei der Aktivierung (siehe Punkt 4) angepasst werden.
[code]

[/code]

Die Optik des Schiebereglers können Sie ändern, indem Sie die Grafikdateien manipulieren und mit einer Reihe von Optionen, die Sie auf der (englsichen) Plugin-Website finden.

Unser Beispiel können Sie auch als html-Datei zum eigenständigen Modifizieren herunterladen.

Ein weiteres Beispiel für den Einsatz des Tools hat Spiegel Online zum Mauerjubiläum veröffentlicht: Fotos von heute können Sie mit historischen Bilder vergleichen, auf denen die Mauer noch existierte.

Im letzten Techniktipp hat Thomas Strothjohann erklärt, wie Sie mit Usability-Tests Ihr Web-Angebot verbessern können.