Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

TwentyTwenty: Einfacher Vorher-/Nachher-Vergleich mit jQuery

    TwentyTwenty: Einfacher Vorher-/Nachher-Vergleich mit jQuery

Mit dem jQuery-Plugin TwentyTwenty kannst du auf simple Weise die Unterschiede zwischen zwei Bildern darstellen. Wir stellen dir das nützliche jQuery-Plugin kurz vor.

TwentyTwenty Screenshot
TwentyTwenty-Vorher-/Nachher-Beispiel

Bei der Darstellung von Bildunterschieden ist das Platzieren der beiden Bilder nebeneinander ein typischer Lösungsansatz. Leider entgeht dabei oft, was genau sich am Bild verändert. Wenn du Unterschiede zwischen Fotos darstellen musst, ist TwentyTwenty ein Plugin, das dich interessieren könnte. Das jQuery-Plugin legt zwei Fotos übereinander und lässt dich die Änderungen mit Hilfe eines Sliders live erleben. Das Skript benutzt die jquery.event.move-Bibliothek, um Maus- und Touch-Eingaben zu verfolgen und funktioniert somit sowohl auf Desktop- als auch auf Touchscreen-Geräten. [related id="461338"] Für den Einsatz von TwentyTwenty gibt es nicht viel zu beachten. Nach dem Einbinden der Bibliothek benötigst du nur noch ein wenig Markup und den entsprechenden JavaScript Aufruf um das Skript zu initialisieren:

<div id="container1"> <img src="sample-before.png"> <img src="sample-after.png"> </div>
$(window).load(function() { $("#container1").twentytwenty(); });

TwentyTwenty für Vorher-/Nachher-Bilder

TwentyTwenty ist ein tolles Plugin, um Vorher-/Nachher-Vergleiche mit Bildern anzustellen. Das Plugin funktioniert mit Touch-Geräten und ist responsive, sodass es sich in jede Geräte-Größe perfekt einfügen lässt. TwentyTwenty basiert auf Sass und lässt sich mit einer Reihe von Sass-Variablen in der Erscheinung anpassen. Brauchst du also für ein zukünftiges Projekt einen bequemen Vorher/Nachher-Vergleich, könnte TwentyTwenty genau die Richtige Lösung für dich parathalten. Auf der offiziellen Seite zum TwentyTwenty-Plugin erfährst du mehr.

mebulon
mebulon

Mal ein generelles Feedback.
Ich bin so ziemlich täglich auf eurer Seite.
Mich interessiert besonders alles was mit Html5 und Co zu tun hat.
Ganz oft stellt ihr bestimmte Scripte vor. Wie z.b. Parallax Scrolling vor kurzem oder jetzt dieses.

Normalerweise will ich eigentlich immer den effekt sehen bevor ich anfange euren Artikel zu lesen. Um zu prüfen ob mich das interessiert. Und den Effekt zu sehen ist intersannter und geht schneller als mir durchzulesen was er macht.

Leider merke ich, dass ich jedesmal eine gewisse lange Zeit brauche, bis ich zu der jeweiligen Demopage komme. Ich muss immer den Fließtext durchscannen und prüfen welcher Link jetzt eigentlich zu der Wirklichen Demo Seite geht.

Könntet ihr das nicht irgendwie deutlicher auszeichnen? Und bitte am Anfang der Seite...
Oder warum nicht gleich eine Demo in den Artikel.
Hätte hier z.b. doch super easy funktioniert.

Würd mich freuen. Ich stöbere nämlich gerne durch eure Artikel. Und keine Sorge ich lese auch tatsächlich welche ;) Aber halt lange nicht alle.

Antworten
fimbim

So etwas gibt es schon ganz lange. Nennt sich "beforeafter". Hab ich mal verwendet um mein Retina Display testen zu können: http://www.retina-test.de/retina-fotos.html

Antworten
Internetagentur agency1®

Super Tool um z.B. Fotoretuschen optimal zu präsentieren. Vielen Dank! :)

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden
Alle Jobs
Zur Startseite
Zur Startseite