Bilder vergrößern mit variabler Lupenfunktion!

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! � Bilder vergrößern mit variabler Lupenfunktion!

Seite 1 von 3 � Seite 1 2 3 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie. Wasserstoff - Energietr�ger der Zukunft. Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Elektronik & Elektrotechnik - Fragen & Antworten Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschl�ge. Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit. Alles, was noch so �brig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | Bilder vergrößern mit variabler Lupenfunktion! datum

20.12.2012 16:03 (zuletzt bearbeitet: 30.05.2024 10:35)

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:

Lupenform einstellbar (kreisförmig, rechteckig mit und ohne abgerundeten Ecken)
minimale und maximale Lupengröße über Mausrad einstellbar!
Lupengröße speicherbar!
Zoomfaktor manuell einstellbar
Bild kann bei aktiver Lupenfunktion abgedunkelt werden
Lupe mit Schattenbildung / ein- und ausschaltbar
Bild-Verlinkung
Keine fortlaufenden ID's notwendig!!!
Bilder benötigen nur class="lupe" im Bilderlink

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

Hier die Links:

Schließen

Bild mit Lupenfunktion

Bitte die Maus über das Bild bewegen!

Hier kommen wichtige und interessante Links:

Deutsches jQuery-Forum: jQuery-Board.de
jQuery für Anfänger: jQuery � das Framework um schmerzfrei mit JavaScript zu arbeiten

Bis dann und gutes Gelingen
Wolfgang

WolverineX und finden das Top!

Antworten

#2 | Lupe mit kleinem, schnellen Script von "Joe Bartlett"! datum

11.04.2014 16:16 (zuletzt bearbeitet: 11.12.2021 13:43)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3594
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1464

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lupe</title>
 
<style>
.loupe {z-index:11;cursor:none;background-color:#ffffff; border-radius:250px;border:3px solid #444444;width:250px !important;height:250px !important;}
.lupe {width:400px;}
</style>
 
</head>
<body>
 
<!-- 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> -->
 
<script>
$(function(){
 
// (c) 2010 jdbartlett, MIT license
(function(a){a.fn.loupe=function(b){var c=a.extend({loupe:"loupe",width:200,height:150},b||{});return this.length?this.each(function(){var j=a(this),g,k,f=j.is("img")?j:j.find("img:first"),e,h=function(){k.hide()},i;if(j.data("loupe")!=null){return j.data("loupe",b)}e=function(p){var o=f.offset(),q=f.outerWidth(),m=f.outerHeight(),l=c.width/2,n=c.height/2;if(!j.data("loupe")||p.pageX>q+o.left+10||p.pageX<o.left-10||p.pageY>m+o.top+10||p.pageY<o.top-10){return h()}i=i?clearTimeout(i):0;k.show().css({left:p.pageX-l,top:p.pageY-n});g.css({left:-(((p.pageX-o.left)/q)*g.width()-l)|0,top:-(((p.pageY-o.top)/m)*g.height()-n)|0})};k=a("<div />").addClass(c.loupe).css({width:c.width,height:c.height,position:"absolute",overflow:"hidden"}).append(g=a("<img />").attr("src",j.attr(j.is("img")?"src":"href")).css("position","absolute")).mousemove(e).hide().appendTo("body");j.data("loupe",true).mouseenter(e).mouseout(function(){i=setTimeout(h,10)})}):this}}(jQuery));
 
$('.lupe').loupe();
});
</script> 
 

 
<br><br><br><br>
 
Bild 1: <br>
<img class="lupe" src="https://files.homepagemodules.de/b104774/pictures_u299_fa7987.jpg">
 
<br><br>Bild 2: <br>
<img class="lupe" src="https://files.homepagemodules.de/b104774/pictures_u299_fa7987.jpg">
 
</body>
</html>
 
 

Schlie�en

Bildbreite für alle Bilder über die "Klasse" verändern:

<style>
.lupe {width:400px;width:500px;}
</style>

<body>
<img class="lupe" src="https://files.homepagemodules.de/b104774/pictures_u299_fa7987.jpg" />
</body>


Bildbreite für unterschiedliche Bilder über "width" verändern:

<style>
.lupe {width:400px;}
</style>

<body>
<img class="lupe" width="400px" src="https://files.homepagemodules.de/b104774/pictures_u299_fa7987.jpg" />
<img class="lupe" width="500px" src="https://files.homepagemodules.de/b104774/pictures_u299_fa7987.jpg" />
</body>

Schlie�en

Das Aussehen der Lupe lässt sich über die css ".loupe" einstellen.

Die Form der Lupe wird über die Breite (width), die Höhe (height) und die Ecken (border-radius) bestimmt.

Runde Lupe:

1
 
.loupe {border-radius:250px;width:250px !important;height:250px !important;}

Rechteckige Lupe mit abgerundeten Ecken:

1
 
.loupe {border-radius:50px;width:250px !important;height:150px !important;}

Quadratische Lupe mit abgerundeten Ecken:

1
 
.loupe {border-radius:50px;width:250px !important;height:250px !important;}

Quadratische Lupe ohne abgerundeten Ecken:

1
 
.loupe {width:250px !important;height:250px !important;}

Rechteckige Lupe ohne abgerundeten Ecken:

1
 
.loupe {width:250px !important;height:150px !important;}

Schlie�en

Die Stärke, die Form und die Farbe des Randes wird über "border" eingestellt.

Lupe mit Rand:

1
 
.loupe {border: 3px solid #444444;}

Schlie�en

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:

1
 
.loupe {box-shadow: 0px 0px 250px #ffffff;}

Lupe mit kleinem Schatten am Rand:

1
 
.loupe {box-shadow: 0px 0px 20px #ffffff;}

Schlie�en

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.

Schlie�en

Bitte die Maus über das Bild bewegen!

Hier nochmal die wichtigen und interessanten Links:

  • Auch hier in der Bildergalerie: Motorräder

  • Joe Bartlett: Downloadlink für jquery.loupe.min.js (Mit Editor öffnen): https://github.com/jdbartlett/loupe/

  • Download jQuery: Download jQuery
  • Englisches jQuery-Forum: jQuery-Lernprogramm
  • MIT-Lizenz auf Wikipedia: MIT license

Bis dann und gutes Gelingen
Wolfgang

Tausendstern findet das Top!

Antworten

#3 | Einbau der Lupe in die Iconbar datum

20.05.2014 13:44 (zuletzt bearbeitet: 21.06.2023 00:06)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3594
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1464

Einbau der Lupe in die Iconbar - Ohne Veränderung des Template
Aktualisiert 20.06.23 - Teil 2

Bild mit Lupenfunktion

Mit der folgenden Anleitung ist es möglich die Lupe in die Iconbar zu platzieren.

Lupen-Script in Fußzeile unter "Admin > Layout > Kopf- und Fußzeile > Fußzeile" eintragen.
Lupenformatierung in die eigene CSS unter "Admin > Layout > Farben & Einstellungen > CSS > Eigener CSS Code" einfügen.
Foren-Code für die Iconbar erstellen und unter "nicht sichtbar" verschieben.
Smiley für die Iconbar erstellen
Fertig!

Script in Fußzeile unter "Admin > Layout > Kopf- und Fußzeile > Fußzeile" eintragen.

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
$(document).ready(function(){
 
// (c) 2010 jdbartlett, MIT license
(function(a){a.fn.loupe=function(b){var c=a.extend({loupe:"loupe",width:200,height:150},b||{});return this.length?this.each(function(){var j=a(this),g,k,f=j.is("img")?j:j.find("img:first"),e,h=function(){k.hide()},i;if(j.data("loupe")!=null){return j.data("loupe",b)}e=function(p){var o=f.offset(),q=f.outerWidth(),m=f.outerHeight(),l=c.width/2,n=c.height/2;if(!j.data("loupe")||p.pageX>q+o.left+10||p.pageX<o.left-10||p.pageY>m+o.top+10||p.pageY<o.top-10){return h()}i=i?clearTimeout(i):0;k.show().css({left:p.pageX-l,top:p.pageY-n});g.css({left:-(((p.pageX-o.left)/q)*g.width()-l)|0,top:-(((p.pageY-o.top)/m)*g.height()-n)|0})};k=a("<div />").addClass(c.loupe).css({width:c.width,height:c.height,position:"absolute",overflow:"hidden"}).append(g=a("<img />").attr("src",j.attr(j.is("img")?"src":"href")).css("position","absolute")).mousemove(e).hide().appendTo("body");j.data("loupe",true).mouseenter(e).mouseout(function(){i=setTimeout(h,10)})}):this}}(jQuery));
 
$('.lupe').loupe();
});
</script>
 

Schlie�en

Um eine andere Form der Lupe zu bestimmen, bitte in Teil 1 nachlesen.
Die Größe des angezeigten Bildes über ".lupe {width:400px}" anpassen.
Beide Zeilen in die eigene CSS unter "Admin > Layout > Farben & Einstellungen > CSS > Eigener CSS Code" einfügen.

1
2
3
 
.loupe {z-index:11;cursor:none;background-color:#ffffff; border-radius:250px;border:3px solid #444444;width:250px !important;height:250px !important;}
.lupe {width:400px;}
 
 

Oder die folgenden 4 Zeilen in Fußzeile unter "Admin > Layout > Kopf- und Fußzeile > Fußzeile" eintragen.

1
2
3
4
5
 
<style>
.loupe {z-index:11;cursor:none;background-color:#ffffff; border-radius:250px;border:3px solid #444444;width:250px !important;height:250px !important;}
.lupe {width:400px;}
</style>
 
 

Schlie�en

Foren-Code erstellen:

Neue Iconbar aufrufen.
"Neue Icons hinzufügen" anklicken.
Reiter Foren-Code anklicken.
Erweiterte Foren-Code einblenden!
Werte eintragen und speichern.
Wird ein Dropdown-Menü angelegt, Foren-Code in "nicht sichbar" verschieben!

Ersetze:

1
2
3
 
[img_Lupe={{breite}}]
...
[/img]
 

Mit:

1
2
3
 
<img class="lupe" style="width:{{breite}} !important; margin-bottom:5px;" src="
...
">
 

Weitere Einstellungen:

1
 
Reihenfolge: 0

Grafik:

1
 
//files.homepagemodules.de/b104774/f46t1197p2706n78_iSdJfZLk.jpg

Der Foren-Code sieht dann so aus:

[img_Lupe=500px]https://files.homepagemodules.de/b104774/pictures_u273_069bfd.jpg[/img]

Schlie�en

Unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Reiter 'Smiley erstellen' " den folgenden Code einsetzen.
"Neue Icons hinzufügen" anklicken.
Werte unter Smiley eintragen und speichern.
Fertig!

Name:  Lupe

Tag: [img_Lupe=400px]','[/img]

Grafik: https://files.homepagemodules.de/b104774/f46t1197p2706n78_iSdJfZLk.jpg

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!

Schlie�en

DropDown-Menü unter "Neue Smiley anlegen > HTML" anlegen.
Namen vergeben z.B. "Lupe".
Unter "Neuen Smileys anlegen > HTML" den folgenden Code eintragen.
Oder Zeile 4 in ein vorhandenes "DropDown-Menü" kopieren.

1
2
3
4
5
6
 
<select name="format" onchange="top.location = this.options[this.selectedIndex].value;this.options[0].selected = true;">
<option value="#" selected="selected">Format</option>
<optgroup class="admin" label="Lupe"> <!-- Überschrift - nicht unbedingt notwendig -->
<option class="admin" value="javascript:insert('[img_Lupe=400px]','[/img]')">Lupe</option>
</optgroup>
</select>
 

Schlie�en

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.

Der Foren-Code mit Bildadresse:

[img_Lupe=400px]https://files.homepagemodules.de/b104774/pictures_u273_069bfd.jpg[/img]

Bild mit Lupenfunktion

Siehe auch Teil 1: Lupe mit kleinem, schnellen Script!
Bilder vergrößern: Bilder vergrößert darstellen durch einfaches "Mouseover"

Bis dann, gutes Gelingen und viel Spaß!
Wolfgang

Daishi und Kipper-Spedition finden das Top!

Antworten

#4 | RE: Lupe mit kleinem, schnellen Script! datum

16.02.2016 17:54

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.

Antworten

#5 | Fehlersuche: Lupen-Skript umgeschrieben! datum

18.02.2016 15:33 (zuletzt bearbeitet: 11.12.2021 13:54)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3594
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1464

Fehlersuche: Lupen-Script umgeschrieben!

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!

Hier das neue JavaScript mit der CSS-Eintrag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<style type="text/css">
.loupe {z-index:11;cursor:none;background-color:#ffffff; border-radius:250px;border:3px solid #444444;width:250px !important;height:250px !important;}
.lupe {width:400px;}
</style>
 

 
<!-- 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> -->
 
<script type="text/javascript">
$(function(){
 
// (c) 2010 jdbartlett, MIT license
(function(a){a.fn.loupe=function(b){var c=a.extend({loupe:"loupe",width:200,height:150},b||{});return this.length?this.each(function(){var j=a(this),g,k,f=j.is("img")?j:j.find("img:first"),e,h=function(){k.hide()},i;if(j.data("loupe")!=null){return j.data("loupe",b)}e=function(p){var o=f.offset(),q=f.outerWidth(),m=f.outerHeight(),l=c.width/2,n=c.height/2;if(!j.data("loupe")||p.pageX>q+o.left+10||p.pageX<o.left-10||p.pageY>m+o.top+10||p.pageY<o.top-10){return h()}i=i?clearTimeout(i):0;k.show().css({left:p.pageX-l,top:p.pageY-n});g.css({left:-(((p.pageX-o.left)/q)*g.width()-l)|0,top:-(((p.pageY-o.top)/m)*g.height()-n)|0})};k=a("<div />").addClass(c.loupe).css({width:c.width,height:c.height,position:"absolute",overflow:"hidden"}).append(g=a("<img />").attr("src",j.attr(j.is("img")?"src":"href")).css("position","absolute")).mousemove(e).hide().appendTo("body");j.data("loupe",true).mouseenter(e).mouseout(function(){i=setTimeout(h,10)})}):this}}(jQuery));
 
$('.lupe').loupe();
});
</script>
 

Schlie�en

Für ein Bild mit variabler Breite, sieht der HTML-Code so aus:

<img class="lupe" src="https://files.homepagemodules.de/b104774/pictures_u429_7c12b2.jpg" width="250px">

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!
Wenn möglich immer große Bilder verwenden!

Hilfreiche Links:

  • Super Support-Tutorial für die Iconbar!
  • Scrollbalken in Forum-Beiträgen mit einstellbaren Größen!
  • HTML-Tabelle: Scrollbare Textbausteine nebeneinander anordnen!
  • Schablone in der Iconbar!
  • Sonderzeichen fürs Forum bereitstellen!
  • Farbverlauf für die Iconbar!
  • Trennlinie für die Iconbar!
  • Super Color-Picker für alle Xobor-Templates!
  • "Achtung Bauarbeiten"!
  • Kleine Iconbar in der Bildergalerie!
  • Formatierungsmöglichkeiten in der Schnellantwort!
  • Smilies für Themen-Markierungen!
  • Iconbar fixieren - gut für lange Beiträge!
  • Meine komplette Forum-Iconbar zum herunterladen!

Wolfgang

Antworten

#6 | RE: Fehlersuche: Lupen-Skript umgeschrieben! datum

15.07.2019 20:56

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!

Antworten

#7 | RE: Fehlersuche: Lupe vergrößert nicht! datum

16.07.2019 06:32 (zuletzt bearbeitet: 11.12.2021 13:56)

Fehlersuche: Lupe vergrößert nicht!

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!
Wenn möglich immer große Bilder verwenden!

Wolfgang

Scannerxy findet das Top!

Antworten

#8 | RE: Fehlersuche: Lupe vergrößert nicht! datum

16.07.2019 13:22

rhennefarth

Informationen anzeigen

Beitr�ge:	5
Registriert seit:	14.07.2019

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	1

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lupe</title>
 
<style type="text/css">
.loupe {z-index:11;cursor:none;background-color:#ffffff; border-radius:250px;border:3px solid #444444;width:250px !important;height:250px !important;}
.lupe {width:400px;}
</style>
 
</head>
<body>
 
<!-- 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>
 
<script type="text/javascript">
$(function(){
 
// (c) 2010 jdbartlett, MIT license
(function(a){a.fn.loupe=function(b){var c=a.extend({loupe:"loupe",width:200,height:150},b||{});return this.length?this.each(function(){var j=a(this),g,k,f=j.is("img")?j:j.find("img:first"),e,h=function(){k.hide()},i;if(j.data("loupe")!=null){return j.data("loupe",b)}e=function(p){var o=f.offset(),q=f.outerWidth(),m=f.outerHeight(),l=c.width/2,n=c.height/2;if(!j.data("loupe")||p.pageX>q+o.left+10||p.pageX<o.left-10||p.pageY>m+o.top+10||p.pageY<o.top-10){return h()}i=i?clearTimeout(i):0;k.show().css({left:p.pageX-l,top:p.pageY-n});g.css({left:-(((p.pageX-o.left)/q)*g.width()-l)|0,top:-(((p.pageY-o.top)/m)*g.height()-n)|0})};k=a("<div />").addClass(c.loupe).css({width:c.width,height:c.height,position:"absolute",overflow:"hidden"}).append(g=a("<img />").attr("src",j.attr(j.is("img")?"src":"href")).css("position","absolute")).mousemove(e).hide().appendTo("body");j.data("loupe",true).mouseenter(e).mouseout(function(){i=setTimeout(h,10)})}):this}}(jQuery));
 
$('.lupe').loupe();
});
</script> 
 
 
 
<br><br><br><br>
<img class="lupe" src="https://adventgemeinde-calw.de/wp-content/uploads/2019/07/Wald-Gottesdienst.jpeg">
 
</body>
</html>
 

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.

Antworten

#9 | RE: Fehlersuche: Lupe vergrößert nicht! datum

16.07.2019 23:12 (zuletzt bearbeitet: 11.12.2021 14:00)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3594
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1464

Fehlersuche: Lupe vergrößert nicht!

Hallo rhennefarth,
wenn ich das richtig sehe, beeinflussen sich die Skripte untereinander!

Versuch:
Über den Quelltext gesehen, hast Du bereits viele eigene jQuery-Scripte!
Versuch mal das mitgelieferte Xobor-jQuery auszutauschen (Zeile 15)!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lupe</title>
 
<style>
.loupe {z-index:11;cursor:none;background-color:#ffffff; border-radius:250px;border:3px solid #444444;width:250px !important;height:250px !important;}
.lupe {width:400px;}
</style>
 
</head>
<body>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
<script>
$(function(){
 
// (c) 2010 jdbartlett, MIT license
(function(a){a.fn.loupe=function(b){var c=a.extend({loupe:"loupe",width:200,height:150},b||{});return this.length?this.each(function(){var j=a(this),g,k,f=j.is("img")?j:j.find("img:first"),e,h=function(){k.hide()},i;if(j.data("loupe")!=null){return j.data("loupe",b)}e=function(p){var o=f.offset(),q=f.outerWidth(),m=f.outerHeight(),l=c.width/2,n=c.height/2;if(!j.data("loupe")||p.pageX>q+o.left+10||p.pageX<o.left-10||p.pageY>m+o.top+10||p.pageY<o.top-10){return h()}i=i?clearTimeout(i):0;k.show().css({left:p.pageX-l,top:p.pageY-n});g.css({left:-(((p.pageX-o.left)/q)*g.width()-l)|0,top:-(((p.pageY-o.top)/m)*g.height()-n)|0})};k=a("<div />").addClass(c.loupe).css({width:c.width,height:c.height,position:"absolute",overflow:"hidden"}).append(g=a("<img />").attr("src",j.attr(j.is("img")?"src":"href")).css("position","absolute")).mousemove(e).hide().appendTo("body");j.data("loupe",true).mouseenter(e).mouseout(function(){i=setTimeout(h,10)})}):this}}(jQuery));
$('.lupe').loupe();
 
});
</script> 
 
<br><br><br><br>
<img class="lupe" src="https://adventgemeinde-calw.de/wp-content/uploads/2019/07/Wald-Gottesdienst.jpeg">
 
</body>
</html>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

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!

Bis dann und gutes Gelingen

Wolfgang

Antworten

#10 | RE: Fehlersuche: Lupe vergrößert nicht! datum

17.07.2019 12:23

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.

Danke mal und einen guten Tag
rhennefarth

Antworten

Framekiller - Mehr Sicherheit für die eigene Webseite � � Einfache Light Box Bildergalerie

Seite 1 von 3 � Seite 1 2 3 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Linklisten und Bilder im Seitenmenü
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 14.02.2025 09:49
Wolfgang • Zugriffe: 75

Rotierende Animation von Bildern - Würfel Animation
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

11.12.2024 15:19
von

Wolfgang • Zugriffe: 458

Auswahlmenü Bild-Einstellungen und Bilder verlinken optisch anpassen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

28.05.2023 12:56
von

Wolfgang • Zugriffe: 464

VAR-Funktion, Variablen und Zahlen in der CSS + CSS/SCSS - Teil 1+2
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 1 22.09.2024 15:30
Wolfgang • Zugriffe: 525
Bilder drehen - In der Bildergalerie & In Beiträgen - Teil 1-5
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 17 05.06.2022 11:39
844er • Zugriffe: 7122

Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang

24.07.2024 11:08
von

Wolfgang • Zugriffe: 2809

Globale Variablen und Beschreibungen anpassen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 06.07.2019 08:59
Wolfgang • Zugriffe: 767

Bilder vergrößern per "Mouseover", mittels "CSS" oder "Tooltipps"
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

18.01.2020 17:44
von

Wolfgang • Zugriffe: 20530

Forum-Bilder mit einstellbarer Größe, Tooltipps und Beschreibung ausstatten - Teil 1-3!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

08.06.2022 10:15
von

Wolfgang • Zugriffe: 4789

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

65%

Forum - Bilder vergrößern mit variabler Lupenfunktion!

Bilder vergrößern mit variabler Lupenfunktion von 'jQueryScript.Net' Aktualisiert 11.12.21

Lupe mit kleinem, schnellen Script von "Joe Bartlett"!Aktualisiert 18.07.2019 - Teil 1

Einbau der Lupe in die Iconbar - Ohne Veränderung des TemplateAktualisiert 20.06.23 - Teil 2

Fehlersuche: Lupen-Script umgeschrieben!

Fehlersuche: Lupe vergrößert nicht!

Fehlersuche: Lupe vergrößert nicht!

Bilder vergrößern mit variabler Lupenfunktion von 'jQueryScript.Net'
Aktualisiert 11.12.21

Lupe mit kleinem, schnellen Script von "Joe Bartlett"!
Aktualisiert 18.07.2019 - Teil 1

Einbau der Lupe in die Iconbar - Ohne Veränderung des Template
Aktualisiert 20.06.23 - Teil 2