Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

webdesign weisshart Startseite

zurück zum Standard-Style

Bildvergleich – vorher / nachher

Hinweis: Dieser Artikel wurde seit längerer Zeit nicht aktualisiert.
Die beschriebenen Techniken funktionieren weiterhin, sollten aber ggf. an aktuelle Anforderungen angepasst werden.

Original Bearbeitet

Fotos: F. Weisshart CC BY-SA 4.0

Die Aufgabenstellung: Den Unterschied zwischen zwei Bildern zeigen. Am einfachsten wäre es natürlich, die zwei Bilder nebeneinander zu platzieren, in der Hoffnung, dass klar wird, was sich genau geändert hat. Aber es geht eleganter. TwentyTwenty ist ein jQuery-Plugin, das diese Aufgabe recht elegant, und vor allem responsiv löst.
Ein Wermutstropfen: Der Slider kann nicht mit der Tastatur bedient werden, ist also nicht barrierefrei.

Gerne wird diese Technik für einen Vorher- / Nachher-Vergleich verwendet. Ich habe als Beispiel ein Foto gewählt, das mit der iOS-App PrismaPhotoEditor bearbeitet wurde.

Copyright-Hinweis

Artikeltexte und Code-Snippets: Creative Commons  CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

Kommentare

Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat