Bilder vergrößern mit variabler Lupenfunktion!

Lesezeichen

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!
Hier sehen Sie Beiträge zu den einzelnen Themen

Themen-Einstellungen

Thema abonnieren

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Präsentation - Fragen und Antworten Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten Ärger mit Ihrem PC? Ärger mit dem PC - Vorbeugung und Hilfe Ärger mit dem PC - 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 Archiv Die besten Links Die besten Links!!! Link - Suche Verschiedenes 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: 17.04.2017 20:55)

Bilder vergrößern mit variabler Lupenfunktion von 'vox.space'
Aktualisiert 17.04.2017

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 jQuery Script 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

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

2 Mitglieder finden das Top!

Startseite Letzte Beiträge

Antworten

#2 | Lupe mit kleinem, schnellen Script! datum

11.04.2014 16:16 (zuletzt bearbeitet: 17.04.2017 21:28)

Wolfgang

Informationen anzeigen

Beiträge:	1879
Beiträge:
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog


Board-Nr:	104774

Lupe mit kleinem, schnellen Script!
Aktualisiert 17.04.2017 - 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

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
 
<!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">
$(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> 
 

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

Um diesen Beitrag zu lesen, müssen Sie sich anmelden!

Ein kleines Dankeschön für meine Arbeit!

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:
. loupe {border-radius:250px;width:250px !important;height:250px !important;}

Rechteckige Lupe mit abgerundeten Ecken:
. loupe {border-radius:50px;width:250px !important;height:150px !important;}

Quadratische Lupe mit abgerundeten Ecken:
. loupe {border-radius:50px;width:250px !important;height:250px !important;}

Quadratische Lupe ohne abgerundeten Ecken:
. loupe {width:250px !important;height:250px !important;}

Rechteckige Lupe ohne abgerundeten Ecken:
. 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:
. 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 weis (#ffffff) gewählt, leutet der Lupenrand. Ist das Maß für den Schatten sehr groß, wirkt das Bild außerhalb der Lupe transparenter.

Lupe mit großem Schatten:
. loupe {box-shadow: 0px 0px 250px #ffffff;}

Lupe mit kleinem Schatten am Rand:
. 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

Um diesen Beitrag zu lesen, müssen Sie sich anmelden!

Ein kleines Dankeschön für meine Arbeit!

Schließen

Bitte die Maus über das Bild bewegen!

Hier nochmal die wichtigen und interessanten Links:

Auch hier in der Bildergalerie: Motorräder

  • Webseite von Joe Bartlett mit einer vereinfachten Lupenfunktion: http://jdbartlett.com/loupe/
  • Direkter Downloadlink für jquery.loupe.min.js (Mit Editor öffnen): jquery.loupe.min.js

  • Download jQuery auf Chip.de: Download jQuery 3.0.0.min.js.zip
  • Deutsches jQuery-Forum: jQuery-Board.de
  • MIT-Lizenz auf Wikipedia: MIT license

Bis dann und gutes Gelingen
Wolfgang

1 Mitglied findet das Top!!

Startseite Letzte Beiträge

Antworten

#3 | Einbau der Lupe in die Iconbar datum

20.05.2014 13:44 (zuletzt bearbeitet: 17.04.2017 21:00)

Wolfgang

Informationen anzeigen

Beiträge:	1879
Beiträge:
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog


Board-Nr:	104774

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

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.
Forencode 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 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>
 
 

Schließen

Forencode erstellen:
  • Neue Iconbar aufrufen
  • "Neue Icons hinzufügen" anklicken
  • Reiter Forencode anklicken
  • Erweiterte Foren-Code einblenden!
  • Werte eintragen und speichern
  • Forencode in "nicht sichbar" verschieben

Ersetze:

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

Mit:

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

Weitere Einstellungen:

1
 
Reihenfolge: 0

Siehe auch: Kuriositäten und ungereimtes zur Xobor-Iconbar / Punkt 3

Um diesen Beitrag zu lesen, müssen Sie sich anmelden!

Ein kleines Dankeschön für meine Arbeit!

Der Forencode 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!

Um diesen Beitrag zu lesen, müssen Sie sich anmelden!

Ein kleines Dankeschön für meine Arbeit!

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>
 

Um diesen Beitrag zu lesen, müssen Sie sich anmelden!

Ein kleines Dankeschön für meine Arbeit!

Schließen

Werden Beiträge mit Bildern geschrieben, braucht nur die Bildadresse markiert und das Lupensymbol in der Iconbar angeklickt werden.
Der Forencode (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]

• 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

Startseite Letzte Beiträge

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
ich 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 einfach 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.

Startseite Letzte Beiträge

Antworten

#5 | Fehlersuche: Lupen-Skript umgeschrieben! datum

18.02.2016 15:33 (zuletzt bearbeitet: 17.04.2017 21:01)

Wolfgang

Informationen anzeigen

Beiträge:	1879
Beiträge:
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog


Board-Nr:	104774

Fehlersuche: Lupen-Script umgeschrieben!

Hallo Olav,
die Bildern mussten immer über dem Script stehen, sonst funktionierte die Lupe nicht!

  • Durch Einfügen von "$(document).ready(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 type="text/css"> ... </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">
$(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

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: