Gehe mit Maus über das Bild
Gehe mit Maus über das Bild
Gehe mit Maus über das Bild
Gehe mit Maus über das Bild
Falls die Anzeige der Lupe nicht korrekt ist,
bitte am Button unten die Seite neu laden.
Hier habe ich eine jQuery Anwendung einer Lupe eingebaut, die ich unter jQueryScript.net gefunden habe. Ladet Euch also dort das Beispiel mit allen Skripten herunter.
Die Lupe zeigt das jeweilige Bild in seiner originalen Größe an.
In meinem Beispiel haben diese beiden Bilder eine Größe von 1920px x 1280px - hier auf dieser Seite sind die Bilder an die Größe des Blocks automatisch von Mobirise angepasst.
Der Einbau ist nicht unbedingt in Mobirise zu empfehlen, schon weil hier noch jQuery verwendet wird, das mit Version Mobirise5 und Bootstrap5 abgeschafft wurde.
Ich habe außerdem etwas neuere jQuery Dateien verwendet, die ich mir wie folgt in diese Verzeichnisse kopiert habe.
Der Verweis zur CSS-Datei sowie alle Verweise zu den jQuery-Dateien gehören in die Seiteneinstellungen in den Bereich:
Inside <head> code:
<!-- CSS Loupe -->
<link rel="stylesheet" type="text/css" href="loupe/css/jquery.classyloupe.min.css" />
Die jQuery-Dateien und das Skript zur Anzeige der Anwendung gehört in den Bereich:
End of <body> code:
<!-- jQuery-Dateien Loupe -->
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="loupe/js/jquery.easing.1.3.js"></script>
<script src="loupe/js/jquery.mousewheel.js"></script>
<script src="loupe/js/jquery.classyloupe.min.js"></script>
<!-- Loupe show -->
<script>
$('.louped').ClassyLoupe({
maxSize: 600,
loupeToggleSpeed: 'fast'
});
</script>
Ich habe mir also um Ordnung zu halten ein Verzeichnis "loupe" im Stammverzeichnis meiner lokalen Publizierung und auf dem Server erstellt.
Verwendet eine neuere jQuery-Datei als jene im Download, denn damit ging in meinem Mobirise die Anwendung nicht. Ich habe hier die Datei jQuery v3.5.1 verwendet, die zuletzt auch von Mobirise verwendet wurde.
Hier könnt ihr diese auch downloaden Klickt im Browser "Speichern unter".
Nun müsst ihr nur noch die class="louped" an jedes Bild schreiben und ein <a> Tag </a> um das Bild herum setzen, dem ich die JavaScript Anweisung "void" (leer) gegeben habe.
<a href="javascript: void();">
<img src="file:///C:/Users/User/Documents/Mobirise/assets/images/mbr-22.jpg" alt="Image" class="louped">
</a>
Viel Erfolg.