Lupenfunktion für Bilder

27.02.2015

Die aktuelle ui.js unterstützt eine Lupenfunktion für Bilder, die sich sowohl per CSS als auch per jQuery aktivieren lässt. Die Lupe selbst ist über CSS individuell gestaltbar.

Als Basis für das Lupenbild wird das HD-Bild genutzt, welches in doppelter Auflösung generiert vorliegt. Bei HD-Monitoren wird standardmäßig die gleiche Auflösung in doppelter Größe genutzt.  

Fahren Sie über das folgende Bild, um die Lupenfunktionen zu sehen.

Bild mit Lupe

Einbau per jQuery

jQuery('img.pictureWithMagnifier').wMagnifier();

Jedes Bild mit der Klasse wglMagnifier wird automatisch mit einer Lupenfunktion versehen

<img class="wglMagnifier" ...

CSS zur Gestaltung der Lupe

.wMagnifier      {cursor:none;z-index:999;background-color:#ffffff;border:solid 5px rgba(255, 255, 255, 0.8);box-shadow:0 0 8px 1px rgba(0, 0, 0, 0.6), inset 0 0 1px 0 rgba(0, 0, 0, 0.2);border-radius:100%;position:absolute;top:-60px;left:-60px;width:160px;height:160px}