Bilder vergrößern mit variabler Lupenfunktion von 'jQueryScript.Net' Aktualisiert 11.12.21
Viele Webseitenbetreiber, die z.B. Elektronik- oder Bekleidungsartikel anbieten, setzen Bilder mit Lupenfunktionen ein, um ihre Artikel genausten darzustellen. Der User oder der Käufer hat den Vorteil jedes Detail in voller Größe zu sehen.
Das folgende Script von jQueryScript.Net hat eine beachtliche Größe und basiert auf dem JavaScript-Framework "jQuery". Die hier vorgestellte Lupenfunktion hat folgende, super geniale Optionen:
Die Lupeneinstellungen lassen sich vielseitig über das Script verändern!
Es ist darauf zu achten, dass das Script mit den Funktionseinstellungen unter den Links der Bilder eingetragen wird
Alle Bilder mit Lupenfunktion benötigen nur class="lupe" im Bilderlink
Lupe mit kleinem, schnellen Script von "Joe Bartlett"! Aktualisiert 18.07.2019 - Teil 1
Das folgende Script ist wesend kleiner, hat nicht ganz so viele Funktionen, ist schneller und kann ohne eigenen Webspace auskommen!
Das Script basiert auch auf dem JavaScript-Framework "jQuery". Die Lupenfunktion hat folgende Optionen:
Lupenform einstellbar (kreisförmig, rechteckig mit und ohne abgerundeten Ecken)
Lupengröße einstellbar!
Zoomfaktor abhängig vom Originalbild
Lupe mit Schattenbildung einstellbar
Keine fortlaufenden ID's notwendig!!!
Bilder benötigen nur class="lupe" im Bilderlink
Es können mehrere Bilder mit Lupe auf einer Seite abgebildet werden!
Bei dieser Lupe ist zu beachten, dass das Original Bild der Lupenvergrößerung entspricht (siehe Zoomfaktor). Im Normalzustand ist das eigentliche Bild verkleinert dargestellt. Fährt man mit der Lupe drüber, wird ein Ausschnitt vom Originalbild angezeigt. Also keine echte Vergrößerung!!! Aber trotzdem super, wie man hier in den Beispielen sehen kann Weiterhin kann das Ausgangsbild über die Klasse (class="lupe" ) oder einer eingefügten Breite (bei unterschiedlichen Größen) eingestellt werden.
Das Aussehen der Lupe lässt sich über die class ".loupe" einstellen
Alle Bilder mit Lupenfunktion benötigen nur class="lupe" im Bilderlink
<!-- Nur wenn jQuery noch nicht vorhanden ist, sonst Zeile 16 entfernen (In Xobor-Templates ist jQuery bereits vorhanden!) --> <!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
Mit der Stärke des Schattens können verschiedene Effekte erzielt werden. Wird ein kleines Maß (20px) und die Farbe Weiß (#ffffff) gewählt, leuchtet der Lupenrand. Ist das Maß für den Schatten sehr groß, wirkt das Bild außerhalb der Lupe transparenter. Lupe mit großem Schatten:
Zoomfaktor der Lupe: Der Zoomfaktor der Lupe ergibt sich aus dem Verhältnis des Originalbildes (großes Bild) und der reduzierten Breite (durch width) der Lupe. Ist das Bild z.B. 750px groß und die reduzierten Breite der Lupe 250px, hat der Zoomfaktor den Wert 3.
Jetzt braucht nur noch der Text oder die Grafik markiert zu werden und mit einem Klick auf die "Lupen-Grafik" wird der Forum-Code in den Beitrag eingefügt!
Werden Beiträge mit Bildern geschrieben, braucht nur die Bildadresse markiert und das Lupensymbol in der Iconbar angeklickt werden. Der Foren-Code (BB-Code) umschließt die Bildadresse. Wenn nötig kann die Größe des Bildes angepasst werden (hier 400px). Wie schon gesagt, ergibt sich der Zoomfaktor aus dem dargestellten Bild und dem Originalbild. Das Originalbild muss immer größer sein, um einen Zoomeffekt zu erreichen! Hier im Forum ist die Lupe in der Iconbar unter "Format > Bild vergrößern > Lupe" zu finden.
Guten Tag, ich bringe mir grad selbst ein bisschen HTML, CSS und Javascript bei und versuche schon seit längerer Zeit es hinzubekommen, eine Lupenfunktion für meine Pics in meine Webseite einzubauen. Jetzt habe ich den hier zur Verfügung stehenden Code einfach mal ausprobiert, aber es will nicht gelingen. Habe den Code komplett, so wie er ist übernommen und an der Stelle mit dem jquery den Kommentar entfernt, aber es funktioniert einfach nicht. Mache ich etwas von Grund auf falsch oder wo könnte der Fehler liegen? Würde mich über eine Antwort sehr freuen.
Hallo Olav, die Bildern mussen immer über dem Script stehen, sonst funktionierte die Lupe nicht!
• Durch Einfügen von "$(function()" wurde dieser Umstand behoben. • Habe den Fehler im JavaScript und in den Beiträgen bereits behoben. • Die Lupe mit dem kleinen schnellen Script ist eigentlich unkompliziert. • Man darf nur den CSS-Eintrag nicht vergessen (<style> ... </style>). • Er funktioniert sowohl im Header, als auch im Body! Hier wird die Formatierung der Lupe bestimmt. • Ist jQuery bereits vorhanden, hier Zeile 9 im Script entfernen! • Das neue Script ist bereits oben in Beitrag 2 + Beitrag 3 eingebessert!
Zu beachten: Es könnte sein, dass sich verschiedene "jQuery-Versionen" untereinander stören! Bitte prüfen!
<!-- Nur wenn jQuery noch nicht vorhanden ist, sonst Zeile 9 entfernen (In Xobor-Templates ist jQuery bereits vorhanden!). --> <!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
Der Zoomfaktor der Lupe ergibt sich aus dem Verhältnis des Originalbildes (großes Bild) und der reduzierten Breite (durch width) der Lupe. Ist das Bild z.B. 750px groß und die reduzierten Breite der Lupe 250px, hat der Zoomfaktor den Wert 3.
Das Lupenbild ist nie größer als das Originalbild. Es findet keine echte Vergrößerung statt. Das Bild wird am Anfang nur kleiner dargestellt und durch die Sicht der Lupe auf Originalgröße gebracht!
Guten Tag, habe für eine kleine Kirchengemeinde eine Homepage zu pflegen, aber leider wenig Wissen. Nun habe ich eine Wanderkarte in welcher der Platz für einen Waldgottesdienst eingezeichnet ist. Die Karte kann ich nun nicht in der ganzen Größe abbilden und so wollte ich gerne die Karte mit einer Lupe überfahren. Ich habe das kleine schnelle Skript genommen, die Karte im Skript ersetzt, geht alles nur die Vergrößerung nicht. Ich weiß nicht wo ich im Scrip den Lupenfaktor setzen muss. Könnte mir da jemand behilflich sein? Vielen Dank im voraus!
Hallo rhennefarth, eine Ursache könnte ein zu kleines Originalbild sein! Kannst Du Dein Skript mal posten? Welche Webseite hast Du? Wo kann man sich Deine Lupenfunktion ansehen?
Zoomfaktor der Lupe:
Der Zoomfaktor der Lupe ergibt sich aus dem Verhältnis des Originalbildes (großes Bild) und der reduzierten Breite (durch width) der Lupe.
Ist das Bild z.B. 750px groß und die reduzierten Breite der Lupe 250px, hat der Zoomfaktor den Wert 3.
Das Lupenbild ist nie größer als das Originalbild. Es findet keine echte Vergrößerung statt. Das Bild wird am Anfang nur kleiner dargestellt und durch die Sicht der Lupe auf Originalgröße gebracht!
Hallo Wolfgang, die Website ist mit Wordpress und dem Editor Cornerstone erstellt. Ich habe ein klassisches Element mit rohem Inhalt in welches ich das script einsetze.
<!-- Nur wenn jQuery noch nicht vorhanden ist, sonst Zeile 16 entfernen (In Xobor-Templates ist jQuery bereits vorhanden!) --> <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
Das Bild das ich unter img class=lupe eingesetzt habe hat die Größe von 929 auf 616 px. Da meine Lupe eine Größe von 250px hat wäre der Lupenfaktor 929:250= 3,7 (ist das so richtig?) Wenn ich mit der Lupe über das Bild gehe bekomme ich ein kleineres Bild, allerdings habe ich auch keinen Lupenfaktor eingesetzt da ich nicht weiß wo. Die Adresse der Homepage ist: www.adventgemeinde-calw.de und unter Veranstaltungen ist der Beitrag.
Frage: Rufst Du eine komplett neue Seite mit Deinem Script auf? Ansonsten sind die Elemente "head, body, …" zu viel, ginge aber trotzdem!
Wenn es jetzt funktioniert, wie lautet der direkte Link zu Deiner Straßenkarte und Deiner Lupe? Man kann dann über den Quelltext sehen, wie das Programm Dein Script einträgt!
Hallo Wolfgang, genau so wie in Deinem Beitrag habe ich mir die Lupenfunktion vorgestellt. Leider geht es bei mir auch nicht, wenn ich das Script austausche. Wenn ich mit der Lupe darüber gehe ist da Bild in der Lupe kleiner als das eigentliche Bild. Nein eine neue Seite rufe ich nach meinem Verständnis nicht auf. Aufgerufen wird "Veranstaltungen" und darunter ist auch das Script. Die Elemente head und body kann ich weglassen oder auch nicht, es ist das gleiche Ergebnis. jQuery Scripte habe ich sonst noch keine verwendet, ich habe bisher alles mit html gemacht, weiß jedoch nicht was da sonst noch alles eingebaut ist.