Hoe een beeldvergroter te bouwen met Vanilla JavaScript

Als je ooit op een winkelwebsite hebt rondgekeken, ben je waarschijnlijk de beeldvergroter-functie tegengekomen. Hiermee kunt u inzoomen op een specifiek deel van een afbeelding voor een beter zicht. Het opnemen van deze kleine maar krachtige functie kan de gebruikerservaring op uw eigen website aanzienlijk verbeteren.

Het naadloos en samenhangend bouwen van een beeldloep kan een uitdaging zijn. Maar als u deze stappen doorloopt, kunt u uw eigen vergrootglas helemaal opnieuw maken, zonder dat u hoeft te vertrouwen op plug-ins van derden.

Wanneer gebruikt u een beeldvergroter in uw webproject?

Een beeldvergroter kan van pas komen wanneer u een project met veel afbeeldingen bouwt. Zoals eerder vermeld, zijn beeldvergroters erg populair bij winkelwebsites, omdat de gebruiker het product soms van dichterbij moet bekijken voordat hij kan beslissen of het de moeite waard is om te kopen.

Klanten vertrouwen uitsluitend op de informatie en afbeeldingen die door de website worden verstrekt om de kwaliteit, kenmerken en het uiterlijk van een product te beoordelen. Statische afbeeldingen alleen bieden echter niet altijd voldoende duidelijkheid of maken een uitgebreide evaluatie van het item mogelijk.

In traditionele winkels kunnen klanten producten fysiek hanteren, ze van dichtbij bekijken en beoordelen of ze geschikt zijn voordat ze kopen. Beeldvergroters proberen deze ervaring na te bootsen door gebruikers virtueel een vergelijkbaar niveau van controle en onderzoek te bieden.

Beeldvergroters kunnen ook van pas komen als je dat bent het bouwen van een fotogalerij-applicatie omdat het inzoomen op een specifiek deel van de afbeelding een belangrijke functie is.

De beeldvergroter bouwen

De code die in dit project wordt gebruikt, is beschikbaar in een GitHub-opslagplaats en is gratis voor u om te gebruiken onder de MIT-licentie.

Maak een map aan en voeg in die map een index.html bestand, stijl.css bestand en main.js bestand. Voeg deze boilerplate-code toe aan index.html:

html>
<htmllang="en">
<hoofd>
<metatekenset="UTF-8" />
<metanaam="uitkijk postje"inhoud="breedte=apparaatbreedte, beginschaal=1.0" />
<titel>Vergrootglas voor afbeeldingentitel>
<koppelingrel="stijlblad"href="stijl.css" />
hoofd>
<lichaam>
lichaam>
html>

Binnen in de lichaam tag, maak een div-element met de klassenaam "header". Voeg vervolgens in de "header" div een h1 kopelement om de titel van uw vergrootglas weer te geven.

U kunt de tekst aanpassen aan uw behoeften. Voeg vervolgens twee span-elementen toe die instructies geven voor het gebruik van het vergrootglas en het huidige zoomniveau aan de gebruiker weergeven.

Maak na het kopgedeelte een div element met de klassenaam "container". Voeg binnen deze div nog een div-element toe met de klassenaam "magnifier" en pas de klasse "hidden" toe om deze aan het zicht te onttrekken.

Dit element vertegenwoordigt het vergrootglasbeeld. Voeg vervolgens een scripttag toe met het kenmerk "src" ingesteld op "/main.js".

<lichaam>
<divklas="kop">
<h1>Vergrootglas voor afbeeldingenh1>
<span>druk op <sterk>Pijl omhoogsterk> of <sterk>Pijltje naar benedensterk> naar
 het zoomniveau vergroten of verkleinen.span>
<span>Zoomniveau: <sterkklas="zoomniveau">1sterk>span>
div>
<divklas="houder">
<divklas="vergrootglas verborgen">div>
div>
<scriptsrc="/main.js">script>
lichaam>

Vervang de code in de stijl.css bestand met het volgende. Je kunt ook een CSS-preprocessor zoals Less als je wil:

:wortel {
--vergrootglas-breedte: 150;
--vergrootglas-hoogte: 150;
}
lichaam {
weergave: buigen;
flex-richting: kolom;
uitlijnen-items: centrum;
}
.container {
breedte: 400px;
hoogte: 300px;
achtergrondformaat: omslag;
achtergrond afbeelding: url("https://cdn.pixabay.com/foto/2019/03/27/15/24/dier-4085255_1280.jpg");
achtergrond herhaling: geen herhaling;
positie: familielid;
cursor: geen;
}
.vergrootglas {
grensradius: 400px;
doos-schaduw: 0px 11px 8px 0px#0000008a;
positie: absoluut;
breedte: berekend(var(--vergrootglas-breedte) * 1px);
hoogte: berekend(var(--vergrootglas-hoogte) * 1px);
cursor: geen;
achtergrond afbeelding: url("https://cdn.pixabay.com/foto/2019/03/27/15/24/dier-4085255_1280.jpg");
achtergrond herhaling: geen herhaling;
}
span {
weergave: blok;
}
.kop {
weergave: buigen;
flex-richting: kolom;
uitlijnen-items: centrum;
}
.verborgen {
zichtbaarheid: verborgen;
}
div > span:negende kind (3) {
lettertypegrootte: 20px;
}

In de main.js bestand, haal de HTML-elementen op met klassenamen, "magnifier" en "container" met behulp van de document.querySelector methode en wijs ze toe aan de variabelen vergrootglas En container, respectievelijk.

Gebruik dan de getComputedStyle functie ophalen van de breedte En hoogte van het vergrootglaselement en extraheer vervolgens de numerieke waarden uit de geretourneerde tekenreeksen met behulp van de subtekenreeks En index van methoden.

Wijs de geëxtraheerde breedte toe aan de variabele vergrootglasBreedte, en de geëxtraheerde hoogte tot vergrootglasHoogte.

laten vergrootglas = document.querySelector(".vergrootglas");
laten houder = document.querySelector(".container");
laten magnifierWidth = getComputedStyle (vergrootglas).width.substring(
0,
 getComputedStyle (vergrootglas).width.indexOf("P")
);
laten magnifierHeight = getComputedStyle (vergrootglas).width.substring(
0,
 getComputedStyle (vergrootglas).height.indexOf("P")
);

Stel vervolgens de variabelen in voor het zoomniveau, het maximale zoomniveau en de posities van de cursor en het vergrootglas.

laten zoomLevelLabel = document.querySelector(".zoomniveau");
laten zoom = 2;
laten maxZoomNiveau = 5;
laten aanwijzerX;
laten aanwijzerY;
laten vergrotenX;
laten vergrotenY;

In het codeblok hierboven, aanwijzerX En aanwijzerY beide vertegenwoordigen de positie van de cursor langs de X- en Y-as.

Definieer nu twee helperfuncties: getZoomLevel die het huidige zoomniveau retourneert, en getPointerPosition die een object retourneert met de X En j coördinaten van de cursor.

functiegetZoomLevel() {
opbrengst zoom;
}
functiegetPointerPosition() {
opbrengst { X: aanwijzerX, j: pointerY}
}

Maak vervolgens een toevoegen updateMagImage functie die een nieuw MouseEvent-object maakt met de huidige cursorpositie en dit naar het containerelement verzendt. Deze functie is verantwoordelijk voor het bijwerken van het vergrootglasbeeld.

functieupdateMagImage() {
laten evt = nieuw Muisgebeurtenis("muisbewegen", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 bubbels: WAAR,
 opzegbaar: WAAR,
 weergave: raam,
 });
 container.dispatchEvent (evt);
}

Nu zou je moeten toevoegen een gebeurtenisluisteraar naar het vensterobject voor de "keyup"-gebeurtenis die het zoomniveau aanpast wanneer de gebruiker op de "pijl omhoog"- of "pijl omlaag"-toets drukt.

De callback-functie op de "keyup" -gebeurtenis is ook verantwoordelijk voor het bijwerken van het zoomniveaulabel en het activeren van de updateMagImage functie.

raam.addEventListener("sleutel omhoog", (e) => {
als (e.sleutel "Pijl omhoog" && maxZoomLevel - Nummer(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zoomen = zoomen + 0.3;
 updateMagImage();
 }
als (e.sleutel "Pijltje naar beneden" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoomen = zoomen - 0.3;
 updateMagImage();
 }
});

Voeg vervolgens een gebeurtenislistener toe aan het containerelement voor de "mousemove"-gebeurtenis.

​​​​​​

Voeg in de callback-functie de functionaliteit toe die de "verborgen" klasse uit het vergrootglaselement verwijdert maak het zichtbaar en berekent de muispositie ten opzichte van de container, waarbij de pagina naar binnen scrolt rekening.

Deze functie moet ook de transformatiestijl van het vergrootglas instellen op de berekende positie, en bepaal de achtergrondgrootte en positie van het vergrootglasbeeld op basis van het zoomniveau en de muis positie.

container.addEventListener("muisbewegen", (e) => {
 vergrootglas.classList.remove("verborgen");
laten rect = container.getBoundingClientRect();
laten x = e.paginaX - rechts.links;
laten y = e.paginaY - rect.top;
 x = x - raam.scrollX;
 j = j - raam.scrollY;
 vergrootglas.stijl.transform = `vertalen(${x}px, ${y}px)`;
const imgBreedte = 400;
const imgHoogte = 300;
 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";
 vergrotenX = x * getZoomLevel() + 15;
 vergrotenY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -vergrotenY + "px";
});

Voeg vervolgens nog een gebeurtenislistener toe aan het containerelement, maar deze keer moet de gebeurtenislistener luisteren naar de "mouseout" -gebeurtenis en voeg de "verborgen" klasse terug toe aan het vergrootglaselement wanneer de muis uit de container is gebied.

container.addEventListener("muis uit", () => {
 vergrootglas.classList.add("verborgen");
});

Voeg ten slotte een gebeurtenislistener toe aan het vensterobject voor de "mousemove"-gebeurtenis die de x- en y-posities van de cursor bijwerkt.

raam.addEventListener("muisbewegen", (e) => {
 pointerX = e.clientX;
 pointerY = e.clientY;
});

Dat is het! Je bent erin geslaagd om een ​​beeldvergroter te bouwen met vanilla JavaScript.

Hoe beeldvergroters de gebruikerservaring verbeteren

Door gebruikers in staat te stellen in te zoomen op specifieke delen van een afbeelding, kunnen ze met een vergrootglas productdetails met meer duidelijkheid bekijken.

Dit verbeterde niveau van visuele verkenning wekt vertrouwen bij gebruikers omdat ze weloverwogen beslissingen kunnen nemen. Dit kan bijdragen aan hogere conversieratio's en een beter klantbehoud.