Kako zgraditi povečevalnik slik z Vanilla JavaScript

Če ste kdaj brskali po nakupovalnem spletnem mestu, ste verjetno naleteli na funkcijo povečevalnika slik. Omogoča vam povečavo določenega dela slike za bližji pogled. Vključitev te majhne, ​​a učinkovite funkcije lahko močno izboljša uporabniško izkušnjo na vašem spletnem mestu.

Izdelava povečevalnika slik na brezhiben in koheziven način je lahko izziv. Toda sprehod skozi te korake vam bo pomagal ustvariti svoj povečevalnik slik iz nič, ne da bi se morali zanašati na vtičnike tretjih oseb.

Kdaj uporabiti povečevalnik slik v vašem spletnem projektu

Povečevalnik slik vam lahko pride prav, ko gradite projekt z veliko slikami. Kot smo že omenili, so povečevalniki slik zelo priljubljeni pri nakupovalnih spletnih mestih, saj si bo uporabnik včasih morda moral podrobneje ogledati izdelek, preden se odloči, ali je vreden nakupa.

Stranke se pri ocenjevanju kakovosti, lastnosti in videza izdelka zanašajo izključno na informacije in slike, ki jih ponuja spletno mesto. Vendar same statične slike morda ne zagotavljajo vedno dovolj jasnosti ali omogočajo celovite ocene predmeta.

V tradicionalnih trgovinah lahko kupci fizično rokujejo z izdelki, jih natančno pregledajo in pred nakupom ocenijo njihovo primernost. Povečevalniki slik poskušajo poustvariti to izkušnjo tako, da uporabnikom virtualno ponudijo podobno raven natančnosti in pregleda.

Povečevalniki slik vam lahko pridejo prav tudi, če ste izdelava aplikacije za galerijo fotografij saj je povečava določenega dela slike pomembna lastnost.

Izdelava povečevalnika slik

Koda, uporabljena v tem projektu, je na voljo v a Repozitorij GitHub in je brezplačen za uporabo pod licenco MIT.

Ustvarite mapo in v to mapo dodajte index.html mapa, style.css datoteka in main.js mapa. Dodajte to okvirno kodo v index.html:

html>
<htmljezik="en">
<glavo>
<metanabor znakov="UTF-8" />
<metaime="viewport"vsebino="width=device-width, initial-scale=1.0" />
<naslov>Povečevalnik sliknaslov>
<povezavarel="stylesheet"href="style.css" />
glavo>
<telo>
telo>
html>

Znotraj telo ustvarite element div z imenom razreda "header". Nato v div »header« dodajte an h1 element naslova za prikaz naslova vaše povečevalne slike.

Besedilo lahko prilagodite svojim potrebam. Nato vključite dva elementa razpona, ki nudita navodila za uporabo lupe in uporabniku prikažeta trenutno stopnjo povečave.

Za razdelkom glave ustvarite a div element z imenom razreda "vsebnik". Znotraj tega diva dodajte še en element div z imenom razreda "magnifier" in uporabite razred "hidden", da ga skrijete pred pogledom.

Ta element bo predstavljal sliko povečevalnika. Nato dodajte oznako skripta z atributom "src", nastavljenim na "/main.js".

<telo>
<divrazred="glava">
<h1>Povečevalnik slikh1>
<razpon>Pritisnite <močan>Puščica gormočan> oz <močan>Puščica navzdolmočan> do
 povečajte ali zmanjšajte stopnjo povečave.razpon>
<razpon>Raven povečave: <močanrazred="raven povečave">1močan>razpon>
div>
<divrazred="posoda">
<divrazred="skrita lupa">div>
div>
<scenarijsrc="/main.js">scenarij>
telo>

Zamenjajte kodo v style.css datoteko z naslednjim. Uporabite lahko tudi a Predprocesor CSS, kot je Less če želiš:

:root {
--širina lupe: 150;
--višina lupe: 150;
}
telo {
zaslon: flex;
flex-direction: stolpec;
align-items: center;
}
.posoda {
premer: 400px;
višina: 300px;
velikost ozadja: pokrov;
slika ozadja: url("https://cdn.pixabay.com/fotografija/2019/03/27/15/24/žival-4085255_1280.jpg");
ozadje-ponovitev: brez ponovitve;
položaj: relativno;
kazalec: nobeden;
}
.lupa {
mejni polmer: 400px;
box-shadow: 0px 11px 8px 0px#0000008a;
položaj: absolutno;
premer: kalk(var(--širina lupe) * 1px);
višina: kalk(var(--višina lupe) * 1px);
kazalec: nobeden;
slika ozadja: url("https://cdn.pixabay.com/fotografija/2019/03/27/15/24/žival-4085255_1280.jpg");
ozadje-ponovitev: brez ponovitve;
}
razpon {
zaslon: blok;
}
.glava {
zaslon: flex;
flex-direction: stolpec;
align-items: center;
}
.skrito {
vidnost: skrit;
}
div > razpon:nth-child (3) {
velikost pisave: 20px;
}

V main.js datoteko, pridobite elemente HTML z imeni razredov, "magnifier" in "container" z uporabo document.querySelector in jih dodelite spremenljivkam povečevalno lupo in posoda, oz.

Nato z uporabo getComputedStyle funkcija pridobiti premer in višina elementa lupe in nato ekstrahirajte številske vrednosti iz vrnjenih nizov z uporabo podniz in indeks metode.

Spremenljivki dodeli ekstrahirano širino širina lupe, izvlečena višina pa na povečevalna višina.

pustiti lupa = dokument.querySelector(".lupa");
pustiti posoda = dokument.querySelector(".container");
pustiti magnifierWidth = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).width.indexOf("p")
);
pustiti magnifierHeight = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).height.indexOf("p")
);

Nato nastavite spremenljivke za stopnjo povečave, največjo stopnjo povečave ter položaje kazalca in povečevalne slike.

pustiti zoomLevelLabel = dokument.querySelector(".zoom-level");
pustiti povečava = 2;
pustiti maxZoomLevel = 5;
pustiti kazalecX;
pustiti kazalecY;
pustiti povečajX;
pustiti povečatiY;

V zgornjem kodnem bloku kazalecX in kazalecY oba predstavljata položaj kazalca vzdolž osi X in Y.

Sedaj pa definirajte dve pomožni funkciji: getZoomLevel ki vrne trenutno stopnjo povečave in getPointerPosition ki vrne predmet z x in l koordinate kurzorja.

funkcijogetZoomLevel() {
vrnitev povečava;
}
funkcijogetPointerPosition() {
vrnitev { x: kazalecX, l: kazalecY }
}

Nato ustvarite dodatek updateMagImage funkcijo, ki ustvari nov objekt MouseEvent s trenutnim položajem kazalca in ga pošlje elementu vsebnika. Ta funkcija je odgovorna za posodabljanje slike povečevalnika.

funkcijoupdateMagImage() {
pustiti evt = novo MouseEvent("premik miške", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 mehurčki: prav,
 preklicno: prav,
 ogled: okno,
 });
 container.dispatchEvent (evt);
}

Zdaj bi morali dodati poslušalec dogodkov na objekt okna za dogodek "keyup", ki prilagodi stopnjo povečave, ko uporabnik pritisne tipki "ArrowUp" ali "ArrowDown".

Funkcija povratnega klica pri dogodku "keyup" je odgovorna tudi za posodabljanje oznake ravni povečave in sprožitev updateMagImage funkcijo.

okno.addEventListener("ključ", (e) => {
če (e.ključ "Puščica navzgor" && maxZoomLevel - številka(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 povečava = povečava + 0.3;
 posodobiMagImage();
 }
če (e.ključ "puščica navzdol" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 povečava = povečava - 0.3;
 posodobiMagImage();
 }
});

Nato elementu vsebnika dodajte poslušalca dogodkov za dogodek »mousemove«.

​​​​​​

V funkciji povratnega klica dodajte funkcijo, ki odstrani "skrit" razred iz elementa lupe v naredi vidno in izračuna položaj miške glede na vsebnik, pri čemer upošteva pomikanje strani račun.

Ta funkcija bi morala tudi nastaviti slog transformacije lupe na izračunani položaj in določite velikost ozadja in položaj povečevalne slike glede na stopnjo povečave in miško položaj.

container.addEventListener("premik miške", (e) => {
 magnifier.classList.remove("skrit");
pustiti rect = container.getBoundingClientRect();
pustiti x = e.pageX - rect.left;
pustiti y = e.pageY - rect.top;
 x = x - okno.scrollX;
 y = y - okno.scrollY;
 magnifier.style.transform = `prevedi(${x}px, ${y}px)`;
konst imgWidth = 400;
konst imgHeight = 300;
 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";
 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -povečajY + "px";
});

Nato elementu vsebnika dodajte še enega poslušalca dogodkov, toda tokrat bi moral poslušalec dogodkov poslušati dogodek "mouseout" in dodajte razred "hidden" nazaj v element lupe, kadar koli je miška zunaj vsebnika območje.

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

Nazadnje dodajte poslušalca dogodkov okenskemu objektu za dogodek "mousemove", ki posodobi položaje x in y kazalca.

okno.addEventListener("premik miške", (e) => {
 kazalecX = e.clientX;
 kazalecY = e.clientY;
});

To je to! Uspelo vam je zgraditi povečevalnik slik z vanilijevim JavaScriptom.

Kako povečevalniki slik izboljšajo uporabniško izkušnjo

S tem, ko uporabnikom omogoča povečavo določenih področij slike, jim lupa omogoča pregledovanje podrobnosti izdelka z večjo jasnostjo.

Ta izboljšana raven vizualnega raziskovanja vliva zaupanje uporabnikom, saj lahko sprejemajo premišljene odločitve. To lahko prispeva k višjim stopnjam konverzije in izboljšanemu ohranjanju strank.