Mobirise Tutorials

Image Zoom mit jQuery

Ausschnitt eines Bildes mit Lupe vergrößern

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.

jQuery Lupe

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.

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren