So erstellen Sie eine Bildlupe mit Vanilla-JavaScript

Wenn Sie jemals eine Shopping-Website durchsucht haben, sind Sie wahrscheinlich auf die Bildlupenfunktion gestoßen. Damit können Sie einen bestimmten Teil eines Bildes vergrößern, um es genauer zu betrachten. Die Integration dieser kleinen, aber wirkungsvollen Funktion kann das Benutzererlebnis auf Ihrer eigenen Website erheblich verbessern.

Der nahtlose und zusammenhängende Aufbau einer Bildlupe kann eine Herausforderung sein. Aber wenn Sie diese Schritte durchgehen, können Sie Ihre eigene Bildlupe von Grund auf erstellen, ohne auf Plugins von Drittanbietern angewiesen zu sein.

Wann Sie eine Bildlupe in Ihrem Webprojekt verwenden sollten

Eine Bildlupe kann nützlich sein, wenn Sie ein Projekt mit vielen Bildern erstellen. Wie bereits erwähnt, erfreuen sich Bildlupen bei Shopping-Websites großer Beliebtheit, da der Benutzer manchmal einen genaueren Blick auf das Produkt werfen muss, bevor er entscheidet, ob es sich lohnt, es zu kaufen.

Kunden verlassen sich ausschließlich auf die auf der Website bereitgestellten Informationen und Bilder, um die Qualität, Funktionen und das Erscheinungsbild eines Produkts zu beurteilen. Allerdings sorgen statische Bilder allein nicht immer für ausreichende Klarheit oder ermöglichen eine umfassende Beurteilung des Artikels.

In traditionellen Geschäften können Kunden die Produkte physisch in die Hand nehmen, sie aus der Nähe begutachten und ihre Eignung vor dem Kauf beurteilen. Bildlupen versuchen, dieses Erlebnis nachzubilden, indem sie den Benutzern virtuell ein ähnliches Maß an Kontrolle und Prüfung bieten.

Auch Bildlupen können nützlich sein Erstellen einer Fotogalerie-Anwendung da das Zoomen in einen bestimmten Teil des Bildes eine wichtige Funktion ist.

Aufbau der Bildlupe

Der in diesem Projekt verwendete Code ist in a verfügbar GitHub-Repository Die Nutzung steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung.

Erstellen Sie einen Ordner und fügen Sie in diesem Ordner eine hinzu index.html Datei, style.css Datei und main.js Datei. Fügen Sie diesen Boilerplate-Code zu index.html hinzu:

html>
<htmllang=„en“>
<Kopf>
<MetaZeichensatz=„UTF-8“ />
<MetaName=„Ansichtsfenster“Inhalt=„width=device-width, initial-scale=1.0“ />
<Titel>BildlupeTitel>
<Verknüpfungrel=„Stylesheet“href=„style.css“ />
Kopf>
<Körper>
Körper>
html>

Im Inneren Körper Tag, erstellen Sie ein div-Element mit dem Klassennamen „header“. Fügen Sie dann im „Header“-Div ein hinzu h1 Überschriftenelement, um den Titel Ihrer Bildlupe anzuzeigen.

Sie können den Text an Ihre Bedürfnisse anpassen. Fügen Sie als Nächstes zwei Span-Elemente ein, die Anweisungen zur Verwendung der Lupe bereitstellen und dem Benutzer die aktuelle Zoomstufe anzeigen.

Erstellen Sie nach dem Header-Abschnitt eine div Element mit dem Klassennamen „container“. Fügen Sie innerhalb dieses Div ein weiteres Div-Element mit dem Klassennamen „magnifier“ hinzu und wenden Sie die Klasse „hidden“ an, um es nicht sichtbar zu machen.

Dieses Element stellt das Vergrößerungsbild dar. Fügen Sie dann ein Skript-Tag hinzu, wobei das Attribut „src“ auf „/main.js“ gesetzt ist.

<Körper>
<divKlasse="Header">
<h1>Bildlupeh1>
<Spanne>Drücken Sie <stark>Pfeil nach obenstark> oder <stark>Pfeil nach untenstark> Zu
 Erhöhen oder verringern Sie die Zoomstufe.Spanne>
<Spanne>Zoomstufe: <starkKlasse=„Zoomstufe“>1stark>Spanne>
div>
<divKlasse="Container">
<divKlasse=„Lupe versteckt“>div>
div>
<Skriptsrc=„/main.js“>Skript>
Körper>

Ersetzen Sie den Code im style.css Datei mit Folgendem. Sie können auch a verwenden CSS-Präprozessor wie Less falls Sie es wollen:

:Wurzel {
--magnifier-width: 150;
--magnifier-height: 150;
}
Körper {
Anzeige: biegen;
Flex-Richtung: Spalte;
align-items: Center;
}
.Container {
Breite: 400px;
Höhe: 300px;
Hintergrundgröße: Abdeckung;
Hintergrundbild: URL("https://cdn.pixabay.com/Foto/2019/03/27/15/24/tier-4085255_1280.jpg");
Hintergrund Wiederholung: keine Wiederholung;
Position: relativ;
Mauszeiger: keiner;
}
.Lupe {
Grenzradius: 400px;
Box Schatten: 0px 11px 8px 0px#0000008a;
Position: absolut;
Breite: kalk(var(--magnifier-width) * 1px);
Höhe: kalk(var(--magnifier-height) * 1px);
Mauszeiger: keiner;
Hintergrundbild: URL("https://cdn.pixabay.com/Foto/2019/03/27/15/24/tier-4085255_1280.jpg");
Hintergrund Wiederholung: keine Wiederholung;
}
Spanne {
Anzeige: Block;
}
.Header {
Anzeige: biegen;
Flex-Richtung: Spalte;
align-items: Center;
}
.versteckt {
Sichtweite: versteckt;
}
div > Spanne:ntes-Kind (3) {
Schriftgröße: 20px;
}

Im main.js Rufen Sie in der Datei die HTML-Elemente mit den Klassennamen „Magnifier“ und „Container“ mithilfe von ab document.querySelector Methode und weisen Sie sie den Variablen zu Lupe Und Container, bzw.

Dann verwenden Sie die getComputedStyle Funktion ruft die ab Breite Und Höhe des Lupenelements und extrahieren Sie dann die numerischen Werte aus den zurückgegebenen Zeichenfolgen mithilfe von Teilzeichenfolge Und Index von Methoden.

Weisen Sie der Variablen die extrahierte Breite zu lupenbreiteund die extrahierte Höhe bis lupenhöhe.

lassen Lupe = dokumentieren.querySelector(„.Lupe“);
lassen Behälter = dokumentieren.querySelector(".Container");
lassen magnifierWidth = getComputedStyle (lupe).width.substring(
0,
 getComputedStyle (lupe).width.indexOf("P")
);
lassen magnifierHeight = getComputedStyle (lupe).width.substring(
0,
 getComputedStyle (lupe).height.indexOf("P")
);

Als nächstes richten Sie die Variablen für die Zoomstufe, die maximale Zoomstufe sowie die Positionen des Cursors und des Lupenbilds ein.

lassen zoomLevelLabel = dokumentieren.querySelector(„.zoom-level“);
lassen zoom = 2;
lassen maxZoomLevel = 5;
lassen ZeigerX;
lassen ZeigerY;
lassen vergrößernX;
lassen vergrößernY;

Im Codeblock oben: ZeigerX Und ZeigerY Beide repräsentieren die Position des Cursors entlang der X- und Y-Achse.

Definieren Sie nun zwei Hilfsfunktionen: getZoomLevel was die aktuelle Zoomstufe zurückgibt, und getPointerPosition was ein Objekt mit dem zurückgibt X Und j Koordinaten des Cursors.

FunktiongetZoomLevel() {
zurückkehren Zoomen;
}
FunktiongetPointerPosition() {
zurückkehren { X: ZeigerX, j: ZeigerY }
}

Als nächstes erstellen Sie eine hinzufügen updateMagImage Funktion, die ein neues MouseEvent-Objekt mit der aktuellen Cursorposition erstellt und es an das Containerelement sendet. Diese Funktion ist für die Aktualisierung des Lupenbildes verantwortlich.

FunktionupdateMagImage() {
lassen evt = neu MouseEvent(„Mausbewegung“, {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 Blasen: WAHR,
 stornierbar: WAHR,
 Sicht: Fenster,
 });
 container.dispatchEvent (evt);
}

Jetzt sollten Sie hinzufügen ein Ereignis-Listener zum Fensterobjekt für das „keyup“-Ereignis, das die Zoomstufe anpasst, wenn der Benutzer die „Pfeil-nach-oben“- oder „Pfeil-nach-unten“-Taste drückt.

Die Rückruffunktion für das „keyup“-Ereignis ist auch für die Aktualisierung der Zoomstufenbezeichnung und das Auslösen des verantwortlich updateMagImage Funktion.

Fenster.addEventListener(„keyup“, (e) => {
Wenn (e.key "Pfeil nach oben" && maxZoomLevel - Nummer(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 Zoom = Zoom + 0.3;
 updateMagImage();
 }
Wenn (e.key "Pfeil nach unten" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoom = zoom - 0.3;
 updateMagImage();
 }
});

Fügen Sie dann dem Containerelement einen Ereignis-Listener für das Ereignis „mousemove“ hinzu.

​​​​​​

Fügen Sie in der Rückruffunktion die Funktionalität hinzu, die die „versteckte“ Klasse aus dem Lupenelement entfernt macht es sichtbar und berechnet die Mausposition relativ zum Container, wobei das Scrollen der Seite berücksichtigt wird Konto.

Diese Funktion sollte auch den Transformationsstil der Lupe auf die berechnete Position einstellen und Bestimmen Sie die Hintergrundgröße und Position des Lupenbilds basierend auf der Zoomstufe und der Maus Position.

container.addEventListener(„Mausbewegung“, (e) => {
 magnifier.classList.remove("versteckt");
lassen rect = container.getBoundingClientRect();
lassen x = e.pageX - rect.left;
lassen y = e.pageY - rect.top;
 x = x - Fenster.scrollX;
 y = y - Fenster.scrollY;
 magnifier.style.transform = `übersetzen(${x}px, ${y}px)`;
const imgWidth = 400;
const imgHeight = 300;
 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + „px“ + imgHeight * getZoomLevel() + „px“;
 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + „px“ + -vergrößernY + „px“;
});

Fügen Sie dann dem Containerelement einen weiteren Ereignis-Listener hinzu, aber dieses Mal sollte der Ereignis-Listener auf das warten „mouseout“-Ereignis und fügen Sie die „versteckte“ Klasse wieder zum Lupenelement hinzu, wenn sich die Maus außerhalb des Containers befindet Bereich.

container.addEventListener(„Mouseout“, () => {
 magnifier.classList.add("versteckt");
});

Fügen Sie abschließend einen Ereignis-Listener zum Fensterobjekt für das „mousemove“-Ereignis hinzu, das die x- und y-Positionen des Cursors aktualisiert.

Fenster.addEventListener(„Mausbewegung“, (e) => {
 pointerX = e.clientX;
 pointerY = e.clientY;
});

Das ist es! Sie haben es geschafft, mit Vanilla-JavaScript eine Bildlupe zu erstellen.

Wie Bildlupen die Benutzererfahrung verbessern

Indem Benutzer bestimmte Bereiche eines Bildes vergrößern können, können sie mit einer Lupe Produktdetails klarer betrachten.

Dieses verbesserte Maß an visueller Erkundung schafft Vertrauen bei den Benutzern, da sie fundierte Entscheidungen treffen können. Dies kann zu höheren Konversionsraten und einer verbesserten Kundenbindung beitragen.