jQuery: Vergrößerungslupe
Mit jQuery können Sie ganz einfach eine effektvolle Lupe umsetzen. Wir zeigen Ihnen, wie leicht das geht.
Als Grundlage benötigen Sie erst einmal etwas Markup. Der äußere Container basiert auf diesem Element:...
Als Grundlage benötigen Sie erst einmal etwas Markup. Der äußere Container basiert auf diesem Element:
<div class="vergroessern">Darin enthalten ist ein weiteres Element, das die Funktion einer Lupe übernimmt, indem es die große Version der Abbildung beinhaltet:
<div class="lupe"></div>In diesem Element befindet sich erst einmal die Miniatur, die es beim Mauskontakt zu vergrößern gilt:
<img class="miniatur" src="https://img4.magnus.de/
Internet-Magazin-10-2012-f199x265-ffffff-Cc51e81c3-
62094829.jpg" width="200"/></div>Um herstellerspezifische Präfixe automatisch zu laden, kommt Prefixfree von Lea Verou zum Einsatz:
<script src="https:////cdnjs.cloudflare.com/ajax/libs/
prefixfree/1.0.6/prefixfree.min.js" type="text/
javascript"></script>und danach wird unmittelbar jQuery aufgerufen:
<script src="//ajax.googleapis.com/ajax/libs/jquery
/1.8.0/jquery.min.js" type="text/javascript"></script>Zu Beginn des Stylesheets kommen erst einmal einige allgemeine Regeln zum Tragen:
* {margin: 0; padding: 0;}
.vergroessern {width: 400px; margin: 50px auto; position:
relative;}Die Lupe entnimmt ihre Form den folgenden Regelsätzen:
.lupe {
width: 175px; height: 175px;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
background: url("https://www.wekashop.de/images/produkte/
IM0912G.png") no-repeat;
display: none;
}Der Glaseffekt entsteht aus der Überlagerung mehrerer Schatten. Nach dem Laden der Seite ist die Lupe erst einmal unsichtbar, bis der Benutzer den Mauszeiger über die Bildminiatur bewegt.Nun kommt jQuery zum Einsatz:
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
$(".vergroessern").mousemove(function(e){Bewegt der Besucher den Mauszeiger über das Bild, muss das Skript möglicherweise erst einmal die nativen Dimensionen des Objektes in Erfahrung bringen.
if(!native_width && !native_height)
{Das HTML-Markup legte die Dimensionen der kleinen Version auf 200 Pixel fest, doch diese Information ist nicht ausreichend. Benötigt werden die tatsächlichen Dimensionen. Der folgende Code erzeugt ein neues Bildobjekt mit der größeren Version der kleinen Abbildung (.miniatur).
var image_object = new Image();
image_object.src = $(".miniatur").attr("src");Dieser Code muss innnerhalb der Funktion eingeschlossen sein, denn erst nach dem Laden der Abbildung stehen ihre Dimensionen fest.
native_width = image_object.width;
native_height = image_object.height;
}
else
{Die X/Y-Koordinaten der Maus legen die Position von .vergroessern im Verhältnis zum Dokument fest.
var vergroessern_offset = $(this).offset();Die Koordinaten von .vergroessern werden nun von denen der aktuellen Mausposition im Verhältnis zum Dokument abgezogen, um die Position des Mauszeigers im Verhältnis zum .vergroessern-Container zu ermitteln.
var mx = e.pageX - vergroessern_offset.left;
var my = e.pageY - vergroessern_offset.top;Zu guter Letzt gilt es noch, die Lupe elegant verschwinden zu lassen, sobald sich die Maus außerhalb des Containers bewegt.
if(mx < $(this).width() && my < $(this).height() && mx >
0 && my > 0)
{
$(".lupe").fadeIn(100);
}
else
{
$(".lupe").fadeOut(100);
}
if($(".lupe").is(":visible"))
{Die Position des .lupe-Elementes wird sich in Abhängigkeit von der Position der Maus über der Bildminiatur (.miniatur) verändern. Nun muss die Lupe aber auch in der Lage sein, dem Mauszeiger zu folgen.
var rx = Math.round(mx/$(".miniatur").width()*native_
width - $(".lupe").width()/2)*-1;
var ry = Math.round(my/$(".miniatur").height()*native_
height - $(".lupe").height()/2)*-1;
var bgp = rx + "px " + ry + "px";Da sich jetzt die Lupe mit dem Mauszeiger bewegt, gilt es, von den Koordinaten des Mauszeigers die Hälfte der Breite und Höhe der Lupe abzuziehen:
var px = mx - $(".lupe").width()/2;
var py = my - $(".lupe").height()/2;
$(".lupe").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})So wird das Objekt innerhalb der Lupe zentriert. Die Lupe folgt der Mausbewegung und wird beim Verlassen des Containers ausgeblendet.
