Tutorial Lupen Vergrößerung über Bild mittels jQuery und CSS3 in NOF

Bitte ladet Euch zunächst diese jQuery-Datei von meinem Server herunter. Rechte Maustaste auf Link und “Ziel speichern unter” wählen.

Lest diese Datei juery.loupe.js in den Skriptimport Eurer NOF-Seite ein, wählt “Client-Seite” und entscheidet ob diese Datei seitenspezifisch, im Masterrahmen oder der gesamten Site (siteübergreifend) verwendet werden soll.

Skriptimport
Skripteinstellungen

Fügt die CSS-Class der Lupe, die Ihr natürlich Euren Wünschen anpassen könnt, in der Design-Ansicht unter “CSS-Code” an einer freien Stelle ein.

.loupe{
   cursor: crosshair;
   -webkit-border-radius:100%;
   -moz-border-radius:100%;
   border-radius:100%;
   -webkit-box-shadow:0 0 0 7px rgba(255,255,255,0.85),  0 0 7px 7px rgba(0,0,0,0.25);
   -moz-box-shadow:0 0 0 7px rgba(255,255,255,0.85),  0 0 7px 7px rgba(0,0,0,0.25) 0;
   box-shadow:0 0 0 7px rgba(255,255,255,0.85),  0 0 7px 7px rgba(0,0,0,0.25)
}

Sucht Euer großes BiId (hier: Papagei-Large.jpg) aus, das die Größe und Qualität für die Lupen-Vergrößerung haben soll. Verkleinert diese große Bild zur Anzeige auf Eurer NOF-Seite nach Belieben mit einem Grafik-Programm (hier: Papagei-Small.jpg) und gebt dem großen Bild die class=“my-loupe”.

<a id="Papagei-Large" href="./images/Papagei-Large.jpg" class="my-loupe"><img id="Papagei-Small" height="499" width="750"  src="./images/Papagei-Small.jpg" alt="Bild Papagei" title="Papagei"></a>

Fügt diesen so vorbereiteten Code in den HTML-Code Editor eines Textfeldes ein, das Ihr an der Stelle auf der Seite aufzieht, an der das Bild angezeigt werden soll.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code oben einfügen

Achtet bei den Links zu den Bildern auf die korrekte relative Pfadangabe. Ich habe diese Bilder zunächst in die Assets-Verwaltung von NOF eingelesen, dann in der Ansicht “Publizieren” das Verzeichnis “images” erstellt und die Bilder in dieses Verzeichnis “images” verschoben. Auf diese Art wird NOF das Verzeichnis “images”, mit den Bildern, auch gleich mit auf den Server publizieren.

Nun fügt Ihr noch das Skript unten zur Anzeige der Lupe am “Ende des Haupttextes” im <body> ein. 200 Pixel ist der Durchmesser der Lupe.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” >  “Ende des Haupttextes” einfügen

<script>
     $(".my-loupe").loupe({ width: 200, height: 200});
</script>

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik