Vorher, nachher

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.(Online finden Sie den Code zum Kopieren – s. oben!)

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js“></script>

Achtung: Bei WordPress müssen Sie den Code im HTML-Modus des Artikel-Editors eingeben.

3. Das Plugin

Laden Sie das Plugin über www.catchmyfame.com/jquery/beforeafter.zip 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: <script type=“text/javascript“ src=“http://Ihr-Server/Unterordner/jquery.beforeafter-1.4.min.js“></script> <script type=“text/javascript“>

$(function(){$(‚#container‘).beforeAfter({imagePath : „http://Ihr-Server/Unterordner/“}); }); </script>

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.

Foto 1: <div id=“container“>

<div><img src=“http://Ihr-Server/Unterordner/Bild1.jpg“ width=“600“ height=“400“ /></div>

Foto 2: <div><img src=“ Ihr-Server/Unterordner/Bild2.jpg“ width=“600“ height=“400“ /></div>

</div>

Thomas Strothjohann ist freier Journalist und Mitglied der „medium magazin“-Redaktion.

redaktion@mediummagazin.de

Tipps

Die Optik des Schiebereglers können Sie ändern, eine Liste mit Optionen unter:

http://bit.ly/cCHCA

Links: Tsunami-Bilder: „Zeit Online“: http://bit.ly/xD3XZw NYT: http://nyti.ms/dGFHYa Modelmorphosis von NYT: http://nyti.ms/ch8U97

Den kompletten Code zum Kopieren und das Beispiel finden Sie online auf: www.mediummagazin.de

Erschienen in Ausgabe 04+05/202012 in der Rubrik „Praxis“ auf Seite 63 bis 63 Autor/en: Thomas Strothjohann. © Alle Rechte vorbehalten. Der Inhalt dieser Seiten ist urheberrechtlich geschützt. Für Fragen zur Nutzung der Inhalte wenden Sie sich bitte direkt an die Redaktion.