Bildvergleich vorher/nachher als Block-Erweiterung

[Tommy Herrmann]

Ich habe eine schon ziemlich alte Anwendung zum Bildvergleich (vorher/nachher | before/after) für Mobirise 5 und höher in reinem Vanilla-JavaScript (ohne jQuery) neu erstellt:

https://www.mobirise-tutorials.com/AI-B ... rison.html

Es gibt eine Block-Erweiterung zum Download, die ihr in Mobirise als .mbrext Datei importieren könnt.

Ihr müsst lediglich die beiden Vergleichsbilder über den Mobirise-Bildeditor mit euren Bildern austauschen. Klickt dazu zum einen auf den linken Bereich vom Platzhalterbild und zum anderen auf den rechten Bereich.

[struggle]

Also, die Anwendung finde ich toll. Da fallen mir ganz viele verschiedene Möglichkeiten ein.

Da ich noch nie was von Vanilla JavaScript gehört habe, war ich neugierig. Mir wurde gesagt, daß es sich um die Standard-Programmiersprache des Browsers ohne zusätzliche Bibliotheken oder Frameworks handelt. Macht das vieles einfacher ?

(Die Frau hat sich mit 65 aber gut gehalten )

[Tommy Herrmann]

Moin,

ja genau - als "Vanilla" JavaScript bezeichnet man die reine Scriptsprache, als Unterscheidung zur Verwendung von einer jQuery-Bibliothek, eben einer Sammlung von JavaScript- Methoden und Funktionen.

Hier eine kurze Erklärung von ChatGPT dazu:

Der Hauptgrund: jQuery löst Probleme, die moderne Browser heute bereits selbst gelöst haben.

Früher war jQuery Gold wert, weil Internet Explorer, alte Safari-/Firefox-Versionen usw. JavaScript sehr unterschiedlich umgesetzt haben. Heute sind querySelector, addEventListener, fetch, classList, CSS-Animationen usw. überall Standard.

Bei Mobirise hängt das auch mit Bootstrap 5 zusammen: Bootstrap 5 hat jQuery als Abhängigkeit entfernt und setzt auf Vanilla JavaScript. Mobirise-5-Themes folgen diesem Weg offenbar ebenfalls.


Nachteile von jQuery heute:

> Zusätzliche Dateigröße
Man lädt eine ganze Bibliothek, obwohl man oft nur wenige Funktionen braucht.

> Langsamere Ladezeit
Jede zusätzliche JS-Datei kostet Ladezeit, besonders auf Mobilgeräten.

> Abhängigkeit
Wenn ein Plugin jQuery braucht, muss jQuery immer mitgeladen werden. Das macht Projekte schwerer wartbar.

> Moderne Browser brauchen es kaum noch

> Veraltete Plugin-Landschaft
Viele jQuery-Plugins sind alt, nicht mehr gepflegt oder passen schlecht zu modernen Frameworks und Build-Prozessen.

> Konflikte bei Website-Buildern
Gerade bei Mobirise können alte jQuery-Snippets oder Erweiterungen in Bootstrap-5-Projekten Probleme machen, weil jQuery nicht mehr automatisch vorhanden ist.


Aber: jQuery ist nicht „schlecht“. Für alte Projekte, WordPress-Plugins oder bestehende Codebasen ist es weiterhin okay. Für neue, einfache Websites ist Vanilla JavaScript meist schlanker, moderner und zukunftssicherer.

… und ja, ich fand auch schon damals (zu NOF Zeiten) diese vorher/nachher Anwendung recht toll und habe diese jetzt eben auch für Mobirise 5 verwendbar gemacht, ohne dass man jQuery zusätzlich verwenden muss. Das war eine ganz gewaltige Arbeit, insbesondere dass man beide Bilder über den Bild-Editor von Mobirise einbauen kann.

Ich hatte auch mächtig Stress, das KI generierte Bild der Frau deckungsgleich hin zu bekommen, da hat sich mein ChatGPT sehr schwer mit getan, wie so oft mit Bildern.

[Tommy Herrmann]

Ich habe jetzt noch eine zusätzliche Variante erstellt - Bildvergleich 3 - Button "Bild 3"

Bei dieser Variante ist das initiale Bild offen, das linke Bild wird also vollständig gezeigt, anstatt jedes Bild nur mittig.

Das gibt einem noch andere Möglichkeiten. Dadurch entsteht ein viel stärkerer „Reveal“-Effekt als bei einer mittigen Startposition.

https://www.mobirise-tutorials.com/AI-B ... rison.html

Download der Block-Erweiterung als .mbrext-Datei ist unter dem Bild.

[struggle]

Hallo, das ist ja noch einfacher
Da muss man nix mehr pixelgenau ausrichten.
Man braucht ja nur den Hintergrund als Bild, und dann dasselbe Bild mit einem PNG.Objekt darauf.
Hier Straße und Auto
oder Meer und Hai
usw.

[Tommy Herrmann]

Das sind zwei unterschiedliche Verwendungsmöglichkeiten.

Die mittlere Anordnung eignet sich besser zum Vergleich, während die offene Variante eher als Überraschung wirkt.

In jedem Fall muss man darauf achten, passende Bilder zu finden oder selbst zu erstellen — das ist nicht so wirklich einfach.

Bei der "offenen" (neuesten) Variante muss man dann den Schieber ein wenig aufziehen, damit man auch das untere, rechte Bild über den Bild-Editor von Mobirise ändern kann.

[struggle]

Ich habe eine Webseite (www.online2web.de), wo ich Blöcke von Tommy und Volker zunächst teste. Diese Seite ist leider nur mit http statt https erreichbar. Das muss ich noch ändern.

Ich habe jetzt den Bildvergleich getestet, Bilder sind doof, aber es funktioniert !

http://www.online2web.de/zehn.html

http://www.online2web.de/zwoelf.html

[Tommy Herrmann]

Moin,



Klasse — so entsteht gegenüber diesen Anwendungen natürlich ein deutlich größeres Sicherheitsgefühl, und man kann viel besser einschätzen, ob und wo man sie einsetzen möchte.

Ein Zertifikat brauchst Du für so eine Testseite doch nicht — zumindest nicht, wenn es etwas kosten würde.


P.S.:

Der Löwe sitzt nicht ganz deckungsgleich an derselben Position. Das ist natürlich bei so etwas schon wichtig.

Hier meine beiden Bilder zum Testen (wer mag):









Bei dem Bild vom Schloss Charlottenburg hier in Berlin ist das einfach, da man ja exakt das gleiche Bild nur in Graustufen abändern muss. Daher ist das auch zu 100% deckungsgleich.


Unten die Frau, die ChatGPT für mich ganz neu generiert hat.

Da ist das ungleich schwieriger, da es am Ende ja doch etwas andere Bilder sind und da hat ChatGPT mindestens 20 Versuche benötigt. So ganz 100%ig sind die Bilder nicht geworden. Wer mag, darf diesse KI-Bilder natürlich auch gerne zum Testen verwenden.

[struggle]

Hallo Tommy,

Ein Zertifikat brauchst Du für so eine Testseite doch nicht — zumindest nicht, wenn es etwas kosten würde

Mir geht es nur darum, daß der Besucher keine Meldung erhält, die Webseite würde keine sichere Verbindung mit HTTPS unterstützen.

Daß der Löwe nicht deckungsgleich ist, ist der "Schnelligkeit" geschuldet. Ich habe einfach 2 fertige Bilder aus der Onlinesammlung genommen, das kann man genauer machen

Ich muss mal mit der Bildbearbeitung eine Deckungsgleichheit testen, 2 Bilder in PNG für 2 Ebenen erstellen, dann kann man die Ebenen genau übereinander schieben, dann jeweils den Hintergrund hinzufügen und beide Bilder seperat abspeichern.

[Tommy Herrmann]

Da steht dann nur in der Eingabezeile vom Browser "Nicht Sicher" - das ist doch OK.

Diese Fehlermeldung entsteht nur dann, wenn man eine "http" Seite versucht mit mit dem Protokoll "https" aufzurufen.