Legg til denne praktiske funksjonen til bildene dine, og de besøkende vil sette pris på brukervennligheten og oppmerksomheten på detaljer du har gitt.

Hvis du noen gang har surfet på et shoppingnettsted, har du sannsynligvis kommet over bildeforstørrelsesfunksjonen. Den lar deg zoome inn på en bestemt del av et bilde for en nærmere visning. Å innlemme denne lille, men virkningsfulle funksjonen kan i stor grad forbedre brukeropplevelsen på ditt eget nettsted.

Å bygge en forstørrelsesglass på en sømløs og sammenhengende måte kan være en utfordring. Men å gå gjennom disse trinnene vil hjelpe deg med å lage din egen bildeforstørrelse fra bunnen av, uten at du trenger å stole på tredjeparts plugins.

Når du skal bruke et bildeforstørrelsesglass i nettprosjektet ditt

En bildeforstørrelse kan komme godt med når du skal bygge et prosjekt med mange bilder. Som nevnt tidligere, er bildeforstørrelsesglass veldig populært på shoppingnettsteder fordi noen ganger brukeren kan trenge å se nærmere på produktet før han bestemmer seg for om det er verdt å kjøpe.

instagram viewer

Kunder stoler utelukkende på informasjonen og det visuelle som tilbys av nettstedet for å vurdere kvaliteten, funksjonene og utseendet til et produkt. Det er imidlertid ikke sikkert at statiske bilder alene alltid gir tilstrekkelig klarhet eller gir mulighet for en omfattende evaluering av varen.

I tradisjonelle butikker kan kundene fysisk håndtere produkter, granske dem på nært hold og vurdere deres egnethet før de kjøper. Bildeforstørrelsesglass prøver å gjenskape denne opplevelsen ved å tilby brukere et lignende nivå av gransking og undersøkelse virtuelt.

Bildeforstørrelsesglass kan også komme godt med hvis du er det bygge en fotogalleriapplikasjon siden zooming inn på en bestemt del av bildet er en viktig funksjon.

Bygge bildeforstørrelsesglasset

Koden som brukes i dette prosjektet er tilgjengelig i en GitHub-depot og er gratis for deg å bruke under MIT-lisensen.

Opprett en mappe, og legg til en index.html fil, style.css fil og main.js fil. Legg til denne standardkoden til index.html:

html>
<htmllang="no">
<hode>
<metategnsett="UTF-8" />
<metaNavn="viewport"innhold="width=device-width, initial-scale=1.0" />
<tittel>Bildeforstørrelsesglasstittel>
<linkrel="stilark"href="style.css" />
hode>


<kropp>
kropp>
html>

Inne i kropp tag, lag et div-element med klassenavnet "header". Deretter legger du til en i "header"-div h1 overskriftselement for å vise tittelen på bildeforstørrelsesglasset.

Du kan tilpasse teksten for å passe dine behov. Deretter inkluderer du to spennelementer som gir instruksjoner for bruk av forstørrelsesglasset og viser gjeldende zoomnivå til brukeren.

Etter overskriftsdelen oppretter du en div element med klassenavnet "container". Inne i denne div, legg til et annet div-element med klassenavnet "magnifier" og bruk den "skjulte" klassen for å skjule den.

Dette elementet vil representere forstørrelsesbildet. Deretter legger du til en skripttag med "src"-attributtet satt til "/main.js".

<kropp>
<divklasse="Overskrift">
<h1>Bildeforstørrelsesglassh1>
<span>trykk <sterk>Pil oppsterk> eller <sterk>Pil nedsterk> til
 øke eller redusere zoomnivået.span>


<span>Zoomnivå: <sterkklasse="zoom-nivå">1sterk>span>
div>


<divklasse="container">
<divklasse="forstørrelsesglass skjult">div>
div>
<manussrc="/main.js">manus>
kropp>

Bytt ut koden i style.css fil med følgende. Du kan også bruke en CSS-forprosessor som Less hvis du vil:

:rot {
-- forstørrelsesglass-bredde: 150;
--lupe-høyde: 150;
}
kropp {
vise: bøye seg;
flex-retning: kolonne;
align-elementer: senter;
}


.container {
bredde: 400px;
høyde: 300px;
bakgrunnsstørrelse: dekke;
bakgrunnsbilde: url("https://cdn.pixabay.com/bilde/2019/03/27/15/24/dyr-4085255_1280.jpg");
bakgrunnsgjenta: ingen gjentakelse;
posisjon: slektning;
markøren: ingen;
}


.forstørrelsesglass {
grense-radius: 400px;
boks-skygge: 0px 11px 8px 0px#0000008a;
posisjon: absolutt;
bredde: beregnet(var(-- forstørrelsesglass-bredde) * 1px);
høyde: beregnet(var(--lupe-høyde) * 1px);
markøren: ingen;
bakgrunnsbilde: url("https://cdn.pixabay.com/bilde/2019/03/27/15/24/dyr-4085255_1280.jpg");
bakgrunnsgjenta: ingen gjentakelse;
}


span {
vise: blokkere;
}


.Overskrift {
vise: bøye seg;
flex-retning: kolonne;
align-elementer: senter;
}


.skjult {
synlighet: skjult;
}
div > span:nth-child (3) {
skriftstørrelse: 20px;
}

I main.js fil, hente HTML-elementene med klassenavn, "magnifier" og "container" ved å bruke document.querySelector metode og tilordne dem til variablene forstørrelsesglass og container, henholdsvis.

Deretter bruker du getComputedStyle funksjonen hente bredde og høyde av forstørrelseselementet og trekk deretter ut de numeriske verdiene fra de returnerte strengene ved å bruke understreng og oversikt over metoder.

Tilordne den ekstraherte bredden til variabelen forstørrelsesglassBredde, og uttrukket høyde til forstørrelsesglass Høyde.

la forstørrelsesglass = dokument.querySelector(".magnifier");
la container = dokument.querySelector(".container");
la magnifierWidth = getComputedStyle (magnifier).width.substring(
0,
 getComputedStyle (magnifier).width.indexOf("p")
);
la magnifierHeight = getComputedStyle (magnifier).width.substring(
0,
 getComputedStyle (magnifier).height.indexOf("p")
);

Deretter setter du opp variablene for zoomnivået, maksimalt zoomnivå og posisjonene til markøren og forstørrelsesbildet.

la zoomLevelLabel = dokument.querySelector(".zoom-nivå");
la zoom = 2;
la maxZoomLevel = 5;
la pointerX;
la pekerY;
la forstørreX;
la forstørreY;

I kodeblokken ovenfor, pointerX og pekerY begge representerer posisjonen til markøren langs X- og Y-aksene.

Definer nå to hjelpefunksjoner: getZoomLevel som returnerer gjeldende zoomnivå, og getPointerPosition som returnerer et objekt med x og y koordinatene til markøren.

funksjongetZoomLevel() {
komme tilbake zoom;
}
funksjongetPointerPosition() {
komme tilbake { x: pointerX, y: pointerY }
}

Deretter oppretter du legg til en updateMagImage funksjon som oppretter et nytt MouseEvent-objekt med gjeldende markørposisjon og sender det til containerelementet. Denne funksjonen er ansvarlig for å oppdatere forstørrelsesbildet.

funksjonupdateMagImage() {
la evt = ny MouseEvent("mousemove", {
 clientX: getPointerPosition().x,
 klientY: getPointerPosition().y,
 bobler: ekte,
 kansellerbar: ekte,
 utsikt: vindu,
 });
 container.dispatchEvent (evt);
}

Nå bør du legge til en hendelseslytter til vindusobjektet for "keyup"-hendelsen som justerer zoomnivået når brukeren trykker på "ArrowUp" eller "ArrowDown"-tastene.

Tilbakeringingsfunksjonen på "keyup"-hendelsen er også ansvarlig for å oppdatere zoomnivåetiketten og utløse updateMagImage funksjon.

vindu.addEventListener("keyup", (e) => {
hvis (e.nøkkel "Pil opp" && maxZoomLevel - Antall(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zoom = zoom + 0.3;
 updateMagImage();
 }
hvis (e.nøkkel "Pil ned" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoom = zoom - 0.3;
 updateMagImage();
 }
});

Legg deretter til en hendelseslytter til containerelementet for "mousemove"-hendelsen.

​​​​​​

I tilbakeringingsfunksjonen legger du til funksjonaliteten som fjerner den "skjulte" klassen fra forstørrelseselementet til gjør den synlig og beregner museposisjonen i forhold til beholderen, ved å bla inn i siden regnskap.

Denne funksjonen skal også sette transformasjonsstilen til forstørrelsesglasset til den beregnede posisjonen, og bestemme bakgrunnsstørrelsen og posisjonen til forstørrelsesbildet basert på zoomnivået og musen posisjon.

container.addEventListener("mousemove", (e) => {
 magnifier.classList.remove("skjult");
la rect = container.getBoundingClientRect();
la x = e.sideX - rett.venstre;
la y = e.sideY - rect.top;
 x = x - vindu.scrollX;
 y = y - vindu.scrollY;


 magnifier.style.transform = `oversett(${x}px, ${y}px)`;
konst imgWidth = 400;
konst imgHøyde = 300;


 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";


 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -magnifyY + "px";
});

Legg deretter til en annen hendelseslytter til containerelementet, men denne gangen skal hendelseslytteren lytte etter "mouseout"-hendelse og legg den "skjulte" klassen tilbake til forstørrelseselementet når musen er ute av beholderen område.

container.addEventListener("museut", () => {
 magnifier.classList.add("skjult");
});

Til slutt, legg til en hendelseslytter til vindusobjektet for "mousemove"-hendelsen som oppdaterer x- og y-posisjonene til markøren.

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

Det er det! Du har klart å bygge et forstørrelsesglass med vanilje JavaScript.

Hvordan bildeforstørrelsesglass forbedrer brukeropplevelsen

Ved å tillate brukere å zoome inn på bestemte områder av et bilde, lar en forstørrelsesglass dem undersøke produktdetaljer med større klarhet.

Dette forbedrede nivået av visuell utforskning skaper tillit hos brukerne ettersom de kan ta informerte beslutninger. Dette kan bidra til økte konverteringsrater og forbedret kundeoppbevaring.