Mobirise Tutorials

Bildvergleich

Diese Block‑Erweiterung könnt ihr nach dem Herunterladen der .mbrext‑Datei über den oberen Download‑Button direkt in Mobirise importieren.

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

Um eure eigenen Vergleichsbilder zu verwenden, klickt bitte für das erste Bild in den linken und für das zweite Bild in den rechten Bereich des Platzhalterbildes. Es öffnet sich der Mobirise-Bildeditor, in dem ihr eure Bilder wie gewohnt auswählen könnt.

Unten seht ihr den Code-Bereich; die Platzhalterbilder (placeholder.svg) werden über den Bildeditor ersetzt. Die Beschriftungen „Grau“ und „Farbe“ könnt ihr im darunterliegenden Code im Code-Editor entsprechend anpassen oder löschen.

Ebenso könnt ihr den im Code-Editor mit den Buttons markierten Bereich löschen, falls ihr diesen nicht benötigt.
 

<!-- 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>