Juxtapose

Das Programm erstellt einen Vorher/Nachher-Slider. So kannst du beispielsweise Fotografien des gleichen Motivs aus unterschiedlichen Zeiten mit einem Schieberegler verleichen.

Innovativität: Einstellungsoptionen: Nutzerfreundlichkeit: Design:

Meine Meinung

Juxtapose ist ein kleines Tool. Es tut, was es soll – und das zuverlässig. Ein paar mehr Layout-Optionen hätten der Anwendung aber nicht geschadet.

JuxtaposeJS aus der Tool-Schmiede Northwestern University Knight Lab ist ein einfaches, aber effektives Tool. Bevor du allerdings loslegst, solltest du dir überlegen, welche Bilder du in dem "Schieber" miteinander vergleichen willst.

Fakten & Daten

Preis
Sprache
Lernzeit
Arbeitszeit
Ausspielart
Support

|
|
|
|
|
|

kostenlos
englisch
wenige Minuten
wenige Minuten
Embed
Help


zum Tool

Du solltest bei der Auswahl Ihrer Bilder unbedingt darauf achten, dass sie (1) das gleiche Format haben, (2) die gleiche oder zumindest eine ähnliche Perspektive zeigen, (3) die gleichen oder zumindest ähnliche Lichtverhältnisse aufweisen, (4) sich in ihrer Auflösung nicht allzu sehr unterscheiden, (5) einen ähnlichen Kontrast haben, in ihrer Farbintensität nicht zu sehr abweichen und (6) sich stilistisch nicht allzu sehr unterscheiden.

Warum? Bilder zu vergleichen macht mehr Spaß, wenn man die Unterschiede in den Details der Darstellungen selbst sieht und sich nicht von unterschiedlichen Bildeigenschaften ablenken lässt. Das trifft zumindest bei den meisten Bildern zu, zu Ausnahmen zählen vielleicht Vergleiche zwischen historischen Aufnahmen und Fotos aus der heutigen Zeit beispielsweise

Anschauungsbeispiel

Copy, Paste, fast fertig

Wenn Du zwei Bilder, die die Eigenschaften erfüllen, im Internet gefunden hast, bietet dir JuxtaposeJS eine einfach Funktion: Füge unter Left image den Link des Bildes ein, das du auf der linken Seite des Sliders sehen willst. Unter Right image fügst du das rechte Bild ein. Außerdem lässt dich JuxtaposeJS noch zwei weitere Felder ausfüllen, deren Inhalt dir freigestellt ist. Beispielsweise kannst du hier eine Jahreszahl oder den Urheber des Bildes angeben.

Danach kannst du noch bestimmen, an welcher Stelle der Schiebebalken Anfangs stehen soll. Gibst du 50% unter dem Punkt Slider Start Position ein, dann startet dein Slider genau in der Mitte deiner beiden Bilder. Außerdem kannst du unter Options einstellen, ob du beispielsweise die von dir ausgefüllten Inhaltsfelder wie die Jahreszahl oder den Urheber des Bildes auch auf dem Slider wirklich anzeigen lassen willst. Falls du sich gegen die Darstellung der Felder auf dem Slider entscheiden, entferne einfach die Häkchen Show Labels oder Show Credits.

Wenn du Animate aktiviert hast, bedeutet das, dass sich der Trennerbalken dort gleichmäßig hinbewegt, wo der User hingeklickt hat. Ist Animate deaktiviert, springt der Trennerbalken stattdessen an diese Stelle. Außerdem bietet JuxtaposeJS die Möglichkeit, deine Bilder auch vertikal statt horizontal anzuordnen. Aktiviere dazu Vertical. 

Eigene Bilder verslidern

Du willst deine eigene Bilder für den Slider verwenden? Auch kein Problem. Lade deine beiden Bilder auf einen der kostenlosen Servern hoch (zum Beispiel hier), kopiere die Links der Bilder in die oben beschriebenen Felder, folge den oben beschriebenen Schritten und klicke dann auf Update preview, um das Ergebnis zu sehen.

Wenn du mit deinem Ergebnis zufrieden bist, musst du nur noch die Code-Schnipsel in deine Webseite kopieren. Kopiere erst den ersten Teil des Codes an die Stelle, an der Sie Ihren Slider sehen wollen, den zweiten Teil des Codes fügst du ganz am Ende deiner Webseite ein. Und fertig ist die Show!

Noch eine gute Nachricht: Der Slidertrick funktioniert auch auf den Smartphone oder Tablet. Außerdem bietet JuxtaposeJS für die Programmier- oder Probierwütigen auch eine Github-Version. Dort kannst du den kompletten Originalcode einsehen und selbst Änderungen vornehmen und deinen Bedürfnissen anpassen - sofern du Programmierkenntnisse hast. Nichtprogrammierern bleibt die Option, ihren Slider individuell zu gestalten, leider verwehrt.

Pro

Zwei Fotolinks zweier Fotos finden oder selbst generieren, kopieren und in JuxtaposeJS einsetzen - fertig ist das Schiebewunder. Der Vorher/Nachher-Vergleich ist vielleicht nichts Neues, aber kann faszinierend aussehen und Leser auf deine Seite locken - und das mit relativ wenig Aufwand. Außerdem bietet die Github-Version unendliche Möglichkeiten der Individualisierung - vorausgesetzt, du kannst programmieren.

Kontra

Wenn du dieses Tool ohne jeglichen Programmierkenntnisse nutzen willst, kannst du den Slider nicht deinen Wünschen anpassen. Das ist sehr schade, da die Auswahlmöglichkeiten ohne Programmierkenntnisse sehr gering sind. Nützlich wäre auch eine Funktion, die Bilder direkt auf der JuxtaposeJS-Seite anzupassen, so dass sie "slidergerecht" werden (z..B. die Größe der Bilder anpassen usw.).

Bleiwüsten abonnieren:

Fazit & Alternativen

JuxtaposeJS ist schon was feiner. Es ist klein, aber schnell gemacht. Es lässt dir kaum Einstellungsmöglichkeiten, sieht aber zumindest gut aus.

coole Beispiele

Zudem kostet es nichts. Ein bisschen stören wird Cracks die Verwendung von Javascript. Hier wäre eine reine CSS-Lösung sicher besser gewesen. Trotzdem kann man es ruhig einmal ausprobieren. Alternaiven gibt es viele. Aber eine so unkomplizierte und schnelle kennen wir nicht.