Beanloupe ist ein 'Image Magnifier'. Das Plugin auf der Grundlage von jQuery und jQuery Mobile ist auch für die Darstellung auf Mobile Devices geeignet. Zahlreiche Optionen stehen zur Verfügung, u. a. individuelle Einstellungen für das Layout und das Verbinden mit einer Image-Gallerie. Größe und Form der Lupe können angepasst werden, ebenso der Zomm-Level der Vergrößerung.
Vorschau
Am folgenden Beispiel können die unten beschriebenen Optionen getestet werden. Eingegebene Änderungen werden sofort in der Vorschau angezeigt. Das vollständige Beispiel findet sich auch im Downloadbereich.
Installation
Der Hauptcontainer ist ein Block-Element mit einer ID oder Class. Dieses Element ist 'empty', hat also keinen Inhalt.
<div id="loupeSample"></div>
Soll Beanloupe mit einer Image-Gallerie verbunden werden, müssen alle img-Elemente der gleichen Klasse angehören. Das src-Attribut ist obligatorisch; für ein individuelles Thumbnail kann zusätzlich das srcset-Attribut gesetzt werden.
<img class="gallery" srcset="img/beanloupe/preview_bild1.jpg" src="img/beanloupe/bild1.jpg" alt="bild1">
<img class="gallery" srcset="img/beanloupe/preview_bild2.jpg" src="img/beanloupe/bild2.jpg" alt="bild2">
<img class="gallery" srcset="img/beanloupe/preview_bild3.jpg" src="img/beanloupe/bild3.jpg" alt="bild3">
Im Script wird die Funktion 'beanloupe' an der ID oder der Class des Hauptcontainers aufgerufen und obligatorisch die Option 'imageURL' gesetzt. Ist eine Image-Gallerie vorhanden, wird der Option 'galleryClass' der Klassenname der img-Elemente übergeben.
$('#loupeSample').beanloupe({
imageURL : 'img/beanloupe/bild1.jpg',
galleryClass : 'gallery',
});
Optionen
galleryClass: ['string'] ; default: 'none'Wenn eine Image-Gallerie verwendet werden soll, wird hier der Klassenname der img-Elemente angegeben.
galleryEvent: ['hover' | 'click'] ; default: 'hover'Event-Typ, der den Image-Wechsel der Gallery auslöst. Klick- oder Hover-Event stehen zur Verfügung.
imageWidth: ['n'] ; default: '300px'Breite des Image-Containers. Alle gültigen CSS-Values (z. B. px oder %) können verwendet werden.
imageHeight: ['n'] ; default: 'auto'Höhe des Image-Containers. Alle gültigen CSS-Values (z. B. px oder %) können verwendet werden.
imageURL: ['url'] ; default: 'none'Obligatorisch. Hier wird die URL des Images angegeben, das beim Start angezeigt werden soll.
targetZoom: ['n'] ; default: '4'Faktor des Zoom-Levels der Lupe.
targetPosition: ['right' | 'left' | 'top' | 'bottom'] ; default: 'right'Position der Vergrößerung zum Hauptcontainer.
targetOffset_X: ['n'] ; default: '0'Abstand auf der x-Achse zwischen Hauptcontainer und Vergrößerung. Der Wert muss in px angegeben werden.
targetOffset_Y: ['n'] ; default: '0'Abstand auf der y-Achse zwischen Hauptcontainer und Vergrößerung. Der Wert muss in px angegeben werden.
targetBorderWidth: ['n'] ; default: '1px'Breite des Borders der Vergrößerung.
targetBorderColor: ['color'] ; default: 'rgb(200,200,200)'Color des Borders der Vergrößerung. Alle gültigen CSS-Values können verwendet werden.
targetBoxShadow: ['box-shadow'] ; default: 'default'Schatten der Vergrößerung. Alle gültigen CSS-Definitionen können verwendet werden.
loupeWidth: ['n'] ; default: '100px'Breite des Lupe. Alle gültigen CSS-Values (z. B. px oder %) können verwendet werden.
loupeHeight: ['n'] ; default: '70px'Höhe des Lupe. Alle gültigen CSS-Values (z. B. px oder %) können verwendet werden.
loupeBackground: ['color' | 'url'] ; default: 'default'Hintergrund-Image oder Background-Color der Lupe. Eine gültige URL oder CSS-Color Definition ist möglich.
loupeBackgroundOpacity: ['n'] ; default: '0.3'Transparenz der Lupe. Der Wert mus zwischen 0 und 1 liegen. Hat die Option'loupeBackground' den Wert 'default', hat eine Änderung der Tranzparenz keine Auswirkung.
loupeBorderWidth: ['n'] ; default: '1px'Breite des Borders der Lupe.
loupeBorderColor: ['color'] ; default: 'rgb(100,100,100)'Color des Borders der Lupe. Alle gültigen CSS-Values können verwendet werden.
loupeBorderRadius: ['n'] ; default: 'none'Radius des Borders der Lupe. Alle gültigen CSS-Values (z. B. px oder %) können verwendet werden.