Vorher-Nachher-Bildvergleichstool mit Grape.js
Wenn Sie schon einmal schnell Vorher-/Nachher-Bildbereiche für Fallstudien, Portfolios, Immobilien oder Produkt-Makeovers erstellen wollten, ist dieses Projekt genau das Richtige für Sie.
Ich habe ein kostenloses, einseitiges Tool entwickelt, mit dem Sie Bildvergleichsbereiche mit GrapesJS, einem visuellen Drag-and-Drop-HTML-Editor, erstellen können. Das Ziel: Das Erstellen einer Seite (oder eines Abschnitts) mit einem Vorher-/Nachher-Bildpaar und der anschließende Export von produktionsfertigem HTML-Code soll kinderleicht sein.
Wichtiger Hinweis vorab: Dies ist ein Erstellungstool, keine Live-Vorschau. Im Editor ist der Vergleichsblock bewusst nicht interaktiv; die beiden Bilder sind gestapelt, um das Auswählen und Ersetzen zu erleichtern.
Das eigentliche interaktive Slider-Verhalten (Ziehen zum Anzeigen) ist so konfiguriert, dass es im exportierten HTML-Code ausgeführt wird. Mit anderen Worten: Im Editor erstellen, nach dem Export interagieren.
So funktioniert es:
Starten Sie mit einer GrapesJS-Leinwand, die bereits einen bearbeitbaren Bildvergleichsblock (Vorher/Nachher) enthält.
Ersetzen Sie die Bilder durch Ihre eigenen (hochladen oder URLs festlegen).
Fügen Sie optional Überschriften, Text, Schaltflächen oder andere GrapesJS-Komponenten hinzu, um eine vollständige Seite zu erstellen.
Wenn Sie fertig sind, exportieren Sie die Datei als ZIP-Datei mit Assets. Öffnen Sie die Datei in einem Browser, und der Slider wird interaktiv.
Warum dieser Ansatz? Wenn Sie den Editor im Erstellungsmodus belassen, vermeiden Sie versehentliche Interaktionen, die das Auswählen/Ersetzen von Bildern behindern.
Außerdem wird dadurch sichergestellt, dass die exportierte Seite übersichtlich und vorhersehbar ist: keine Editor-Skripte, nur Standard-HTML/CSS/JS, das Sie überall hosten können.
Dieses Projekt kann kostenlos verwendet und auf meiner Website heruntergeladen werden. Es basiert auf HTML, CSS, JavaScript, jQuery, Hammer.js und GrapesJS (kein Vue oder schwere Frameworks).
Nutzen Sie es als Ausgangspunkt für Ihre eigenen Vorher-/Nachher-Galerien oder erweitern Sie es mit zusätzlichen Blöcken.
Sehen Sie sich die Interaktives Bildvergleichstool mit Grape.js Demo hier an
Download
