Mobirise Tutorials

Bildvergleich

Diese Block‑Erweiterung lässt sich direkt als .mbrext‑Datei in Mobirise importieren.

Ich habe die ursprüngliche jQuery‑Anwendung in reines Vanilla‑JavaScript überführt. Dadurch ist sie besser mit Mobirise 5 kompatibel und benötigt keine externen Plugins mehr.

Um eure eigenen Vergleichsbilder zu verwenden, kopiert diese bitte auf euren Server in ein Verzeichnis eurer Wahl und passt im Code‑Editor die URL vom jeweiligen Platzhalter-Bild entsprechend mit der absoluten URL eures Bildes an:

<img class="compare-img compare-after" src="https://www.mobirise-tutorials.com/AI-Beispiele/images/Schloss-Farbe.jpg" alt="Farbe">

<!-- Farbiges Bild hinten -->
<img class="compare-img compare-after" src="../_images/placeholder.svg" alt="Farbe">

<!-- Graues Bild vorne -->
<div class="compare-before-wrap">
<img class="compare-img compare-before" src="../_images/placeholder.svg" alt="Grau">
</div>

<!-- Beschriftungen optional -->
<span class="compare-label compare-label-before">Grau</span>
<span class="compare-label compare-label-after">Farbe</span>