Hur man bygger en bildförstoringsglas med Vanilla JavaScript

Om du någonsin har surfat på en shoppingwebbplats har du förmodligen stött på bildförstoringsfunktionen. Det låter dig zooma in på en specifik del av en bild för en närmare bild. Att införliva denna lilla men effektfulla funktion kan avsevärt förbättra användarupplevelsen på din egen webbplats.

Att bygga en bildförstorare på ett sömlöst och sammanhängande sätt kan vara en utmaning. Men att gå igenom dessa steg hjälper dig att skapa din egen bildförstorare från början, utan att behöva förlita dig på plugins från tredje part.

När ska man använda en bildförstorare i ditt webbprojekt

En bildförstorare kan komma väl till pass när du bygger ett projekt med många bilder. Som nämnts tidigare är bildförstoringsglas väldigt populärt på shoppingwebbplatser eftersom användaren ibland kan behöva ta en närmare titt på produkten innan han bestämmer sig för om den är värd att köpa.

Kunder förlitar sig enbart på den information och bilder som tillhandahålls av webbplatsen för att bedöma kvaliteten, funktionerna och utseendet på en produkt. Det är dock inte säkert att enbart statiska bilder alltid ger tillräcklig klarhet eller möjliggör en heltäckande utvärdering av objektet.

I traditionella butiker kan kunderna fysiskt hantera produkter, granska dem på nära håll och utvärdera deras lämplighet innan de köper. Bildförstorare försöker återskapa denna upplevelse genom att erbjuda användarna en liknande nivå av granskning och undersökning virtuellt.

Bildförstoringsglas kan också vara praktiskt om du är det bygga en fotogalleriapplikation eftersom zoomning in i en specifik del av bilden är en viktig funktion.

Bygga bildförstoringsglaset

Koden som används i detta projekt är tillgänglig i en GitHub-förråd och är gratis för dig att använda under MIT-licensen.

Skapa en mapp och lägg till en mapp i den mappen index.html fil, style.css fil och main.js fil. Lägg till denna standardkod till index.html:

html>
<htmllang="en">
<huvud>
<metateckenuppsättning="UTF-8" />
<metanamn="viewport"innehåll="width=device-width, initial-scale=1.0" />
<titel>Bildförstoringsglastitel>
<länkrel="stilmall"href="style.css" />
huvud>
<kropp>
kropp>
html>

Inuti kropp taggen, skapa ett div-element med klassnamnet "header". Lägg sedan till en i "header" div h1 rubrikelement för att visa titeln på din bildförstorare.

Du kan skräddarsy texten för att passa dina behov. Inkludera sedan två span-element som ger instruktioner för hur förstoringsglaset används och visar den aktuella zoomnivån för användaren.

Efter rubrikavsnittet skapar du en div element med klassnamnet "container". Inuti denna div, lägg till ytterligare ett div-element med klassnamnet "förstoringsglas" och använd den "dolda" klassen för att dölja den.

Detta element kommer att representera förstoringsbilden. Lägg sedan till en skripttagg med "src"-attributet inställt på "/main.js".

<kropp>
<divklass="rubrik">
<h1>Bildförstoringsglash1>
<spänna>Tryck <stark>Pil uppstark> eller <stark>Pil nerstark> till
 öka eller minska på zoomnivån.spänna>
<spänna>Zoomnivå: <starkklass="zoomnivå">1stark>spänna>
div>
<divklass="behållare">
<divklass="förstoringsglas dold">div>
div>
<manussrc="/main.js">manus>
kropp>

Byt ut koden i style.css fil med följande. Du kan också använda en CSS-förprocessor som Less om du vill:

:rot {
--förstoringsglas-bredd: 150;
--förstoringsglas-höjd: 150;
}
kropp {
visa: böja;
flex-riktning: kolumn;
align-objekt: Centrum;
}
.behållare {
bredd: 400px;
höjd: 300px;
bakgrundsstorlek: omslag;
bakgrundsbild: url("https://cdn.pixabay.com/Foto/2019/03/27/15/24/djur-4085255_1280.jpg");
bakgrund-upprepa: ingen upprepning;
placera: relativ;
markören: ingen;
}
.förstoringsglas {
gränsradie: 400px;
box-skugga: 0px 11px 8px 0px#0000008a;
placera: absolut;
bredd: beräkn(var(--förstoringsglas-bredd) * 1px);
höjd: beräkn(var(--förstoringsglas-höjd) * 1px);
markören: ingen;
bakgrundsbild: url("https://cdn.pixabay.com/Foto/2019/03/27/15/24/djur-4085255_1280.jpg");
bakgrund-upprepa: ingen upprepning;
}
spänna {
visa: blockera;
}
.rubrik {
visa: böja;
flex-riktning: kolumn;
align-objekt: Centrum;
}
.dold {
synlighet: dold;
}
div > spänna:nth-child (3) {
textstorlek: 20px;
}

I den main.js fil, hämta HTML-elementen med klassnamn, "förstoringsglas" och "behållare" med hjälp av document.querySelector metod och tilldela dem till variablerna förstoringsglas och behållare, respektive.

Använd sedan getComputedStyle funktion hämta bredd och höjd av förstoringselementet och extrahera sedan de numeriska värdena från de returnerade strängarna med hjälp av delsträng och index för metoder.

Tilldela variabeln den extraherade bredden förstoringsglasBredd, och den extraherade höjden till förstoringsglasHöjd.

låta förstoringsglas = dokumentera.querySelector(".förstoringsglas");
låta behållare = dokumentera.querySelector(".behållare");
låta magnifierWidth = getComputedStyle (magnifier).width.substring(
0,
 getComputedStyle (förstoringsglas).width.indexOf("p")
);
låta magnifierHeight = getComputedStyle (magnifier).width.substring(
0,
 getComputedStyle (förstoringsglas).height.indexOf("p")
);

Ställ sedan in variablerna för zoomnivån, maximal zoomnivå och positionerna för markören och förstoringsbilden.

låta zoomLevelLabel = dokumentera.querySelector(".zoom-level");
låta zooma = 2;
låta maxZoomLevel = 5;
låta pointerX;
låta pekareY;
låta magnifyX;
låta förstoraY;

I kodblocket ovan, pointerX och pekareY båda representerar markörens position längs X- och Y-axlarna.

Definiera nu två hjälpfunktioner: getZoomLevel som returnerar den aktuella zoomnivån, och getPointerPosition som returnerar ett objekt med x och y markörens koordinater.

fungeragetZoomLevel() {
lämna tillbaka zoom;
}
fungeragetPointerPosition() {
lämna tillbaka { x: pointerX, y: pointerY }
}

Skapa sedan lägg till en updateMagImage funktion som skapar ett nytt MouseEvent-objekt med den aktuella markörpositionen och skickar det till containerelementet. Denna funktion är ansvarig för att uppdatera förstoringsbilden.

fungeraupdateMagImage() {
låta evt = ny MouseEvent("mousemove", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 bubblor: Sann,
 kan avbrytas: Sann,
 se: fönster,
 });
 container.dispatchEvent (evt);
}

Nu ska du lägga till en händelselyssnare till fönsterobjektet för "keyup"-händelsen som justerar zoomnivån när användaren trycker på tangenterna "ArrowUp" eller "ArrowDown".

Återuppringningsfunktionen på "keyup"-händelsen är också ansvarig för att uppdatera zoomnivåetiketten och trigga updateMagImage fungera.

fönster.addEventListener("keyup", (e) => {
om (e.nyckel "ArrowUp" && maxZoomLevel - siffra(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zoom = zoom + 0.3;
 updateMagImage();
 }
om (e.nyckel "ArrowDown" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zooma = zooma - 0.3;
 updateMagImage();
 }
});

Lägg sedan till en händelseavlyssnare i containerelementet för "mousemove"-händelsen.

​​​​​​

I callback-funktionen lägger du till den funktionalitet som tar bort den "dolda" klassen från förstoringselementet till gör det synligt och beräknar musens position i förhållande till behållaren, med sidrullning in i konto.

Denna funktion bör också ställa in förstoringsglasets transformationsstil till den beräknade positionen, och bestäm bakgrundsstorleken och positionen för förstoringsbilden baserat på zoomnivån och musen placera.

container.addEventListener("mousemove", (e) => {
 magnifier.classList.remove("dold");
låta rect = container.getBoundingClientRect();
låta x = e.pageX - rect.left;
låta y = e.pageY - rect.top;
 x = x - fönster.scrollX;
 y = y - fönster.scrollY;
 magnifier.style.transform = `översätta(${x}px, ${y}px)`;
konst imgWidth = 400;
konst imgHöjd = 300;
 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";
 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -förstoraY + "px";
});

Lägg sedan till ytterligare en händelseavlyssnare till containerelementet, men den här gången ska händelseavlyssnaren lyssna efter "mouseout"-händelse och lägg till den "dolda" klassen tillbaka till förstoringselementet när musen är ute ur behållaren område.

container.addEventListener("mouseout", () => {
 magnifier.classList.add("dold");
});

Lägg slutligen till en händelseavlyssnare till fönsterobjektet för "mousemove"-händelsen som uppdaterar x- och y-positionerna för markören.

fönster.addEventListener("mousemove", (e) => {
 pointerX = e.clientX;
 pointerY = e.clientY;
});

Det är allt! Du har lyckats bygga en bildförstorare med vanilj JavaScript.

Hur bildförstorare förbättrar användarupplevelsen

Genom att tillåta användare att zooma in på specifika delar av en bild, låter en förstoringsglas dem undersöka produktdetaljer med större tydlighet.

Denna förbättrade nivå av visuell utforskning ingjuter förtroende hos användarna eftersom de kan fatta välgrundade beslut. Detta kan bidra till ökade konverteringsfrekvenser och förbättrat kundbehållande.