Bild Vergleich

Responsiver Bild-Slider mit "vorher / nachher" Effekt

Grau Before
Farbe After


Schloss Charlottenburg Berlin


Hier die von mir verwendeten Scripte für diesen Bildwechsel:

Guckt Euch zunächst dieses Beispiel an und ladet es zum besseren Verständis von GitHub herunter.

Zum Einbau des Slider-Inhalts habe ich einen einfachen Textblock aus der Rubrik "Articles" verwendet, wobei ich meine beiden Bilder, also das graue und das farbige Bild, zunächst mit einem FTP-Programm auf den Server kopiert und mit absoluter Pfadangabe darauf verlinkt habe. Da Mobirise diese Bilder nicht kennt, würde es bei einer relativen Pfadangabe sonst zu einer Fehlermeldung kommen. Fügt das Script unten, anstelle des Beispieltextes von Mobirise, in den Bereich "HTML Editor" vom "Code Editor"  ein:


<!-- Beginn Bildwechsel -->
<div class="js-img-compare">
    <div style="display: none;">
        <span class="images-compare-label">Grau</span>
        <img src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Schloss-Grau.jpg" alt="Before">
    </div>
    <div>
        <span class="images-compare-label">Farbe</span>
        <img src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Schloss-Farbe.jpg" alt="After">
    </div>
</div>
<div style="text-align: center;">
    <button style="border-radius: 20px" class="btn btn-primary js-front-btn">Graues Bild</button>
    <button style="border-radius: 20px" class="btn btn-primary js-back-btn">Farbiges Bild</button>
    <button style="border-radius: 20px" class="btn btn-primary js-toggle-btn">Wechsel</button>
</div>
<!-- Ende Bildwechsel -->



Hier meine CSS, die ich direkt im gleichen Block in den Bereich "CSS Editor" vom "Code Editor" kopiert habe:


img {
  max-width: 100%;
}
.images-compare-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.images-compare-before {
  will-change: clip;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.images-compare-after {
  pointer-events: none;
}
.images-compare-before img, .images-compare-after img {
  max-width: 100%;
  height: auto;
  display: block;
}
.images-compare-separator {
  position: absolute;
  background: white;
  height: 100%;
  width: 1px;
  z-index: 4;
  left: 0;
  top: 0;
}
.images-compare-handle {
  height: 42px;
  width: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  border: 3px solid white;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  border-radius: 1000px;
  -webkit-box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
  z-index: 3;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.images-compare-left-arrow, .images-compare-right-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}
.images-compare-left-arrow {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}
.images-compare-right-arrow {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}
.images-compare-label {
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  color: rgba(0, 0, 0, 0.4);
  background: rgba(255, 255, 255, 0.7);
  padding: 10px;
  border-radius: 5px;
  pointer-events: none;
  display: none;
}
.images-compare-container .images-compare-label {
  display: inherit;
}
.images-compare-before .images-compare-label {
  left: 10px;
}
.images-compare-after .images-compare-label {
  left: auto;
  right: 10px;
}



... und die Verweise auf die jQuery-Dateien und das JavaScript, die ich in den Seiteneinstellungen in den Bereich "End of <body> code:" kopiert habe. Achtet bitte auch auf die Datei "jquery.images-compare.js", die auch dem Download beiliegt und die ich in ein Verzeichnis:

assets-image/js/

in meine lokale Publizierung und in das Stammverzeichnis dieses Projektes auf den Server kopiert habe.


<!-- jQuery für Bildwechsel -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script type="text/javascript" src="assets-image/js/jquery.images-compare.js"></script>
<script type="text/javascript">
    $(function () {
        var imagesCompareElement = $('.js-img-compare').imagesCompare();
        var imagesCompare = imagesCompareElement.data('imagesCompare');
        var events = imagesCompare.events();
        imagesCompare.on(events.changed, function (event) {
            console.log(events.changed);
            console.log(event.ratio);
            if (event.ratio < 0.4) {
                console.log('We see more than half of the back image');
            }
            if (event.ratio > 0.6) {
                console.log('We see more than half of the front image');
            }
            if (event.ratio <= 0) {
                console.log('We see completely back image');
            }
            if (event.ratio >= 1) {
                console.log('We see completely front image');
            }
        });
        $('.js-front-btn').on('click', function (event) {
            event.preventDefault();
            imagesCompare.setValue(1, true);
        });
        $('.js-back-btn').on('click', function (event) {
            event.preventDefault();
            imagesCompare.setValue(0, true);
        });
        $('.js-toggle-btn').on('click', function (event) {
            event.preventDefault();
            if (imagesCompare.getValue() >= 0 && imagesCompare.getValue() < 1) {
                imagesCompare.setValue(1, true);
            } else {
                imagesCompare.setValue(0, true);
            }
        });
    });
</script>



Code