Dodajte ovu praktičnu značajku svojim slikama i vaši posjetitelji će cijeniti upotrebljivost i pažnju koju ste posvetili detaljima.

Ako ste ikada pregledavali web mjesto za kupnju, vjerojatno ste naišli na značajku povećala slike. Omogućuje vam zumiranje određenog dijela slike za bliži prikaz. Uključivanje ove male, ali dojmljive značajke može uvelike poboljšati korisničko iskustvo na vašoj web stranici.

Izrada povećala slike na besprijekoran i kohezivan način može biti izazov. Ali prolazak kroz ove korake pomoći će vam da stvorite vlastito povećalo slike od nule, bez potrebe da se oslanjate na dodatke trećih strana.

Kada koristiti povećalo slike u vašem web projektu

Povećalo slike može vam dobro doći kada gradite projekt s mnogo slika. Kao što je ranije spomenuto, povećala za slike vrlo su popularna na web-mjestima za kupnju jer će ponekad korisnik možda trebati bolje pogledati proizvod prije nego što odluči isplati li se kupiti.

Kupci se oslanjaju isključivo na informacije i vizualne elemente koje nudi web stranica kako bi procijenili kvalitetu, značajke i izgled proizvoda. Međutim, same statične slike ne moraju uvijek pružiti dovoljnu jasnoću ili omogućiti sveobuhvatnu procjenu stavke.

instagram viewer

U tradicionalnim trgovinama kupci mogu fizički rukovati proizvodima, pažljivo ih proučiti i procijeniti njihovu prikladnost prije kupnje. Povećala slike pokušavaju ponovno stvoriti ovo iskustvo nudeći korisnicima sličnu razinu promatranja i virtualnog pregleda.

Povećala slike također vam mogu dobro doći ako ste izrada aplikacije za galeriju fotografija budući da je zumiranje određenog dijela slike važna značajka.

Izrada povećala slike

Kod korišten u ovom projektu dostupan je u a GitHub spremište i besplatan je za korištenje pod MIT licencom.

Napravite mapu i u tu mapu dodajte index.html datoteka, stil.css datoteka i glavni.js datoteka. Dodajte ovaj šablonski kod u index.html:

html>
<htmljezik="en">
<glava>
<metaskup znakova="UTF-8" />
<metaIme="viewport"sadržaj="width=device-width, initial-scale=1.0" />
<titula>Povećalo sliketitula>
<vezarel="list stilova"href="style.css" />
glava>


<tijelo>
tijelo>
html>

Unutar tijelo oznaku, stvorite div element s nazivom klase "header". Zatim u div "zaglavlje" dodajte h1 element naslova za prikaz naslova vašeg povećala slike.

Tekst možete prilagoditi svojim potrebama. Zatim uključite dva rasponska elementa koji pružaju upute za korištenje povećala i prikazuju korisniku trenutnu razinu zumiranja.

Nakon odjeljka zaglavlja, stvorite a div element s nazivom klase "kontejner". Unutar ovog diva dodajte još jedan div element s nazivom klase "magnifier" i primijenite klasu "hidden" da biste ga sakrili od pogleda.

Ovaj element će predstavljati sliku povećala. Zatim dodajte oznaku skripte s atributom "src" postavljenim na "/main.js".

<tijelo>
<divrazreda="Zaglavlje">
<h1>Povećalo slikeh1>
<raspon>Pritisnite <snažna>Strelica goresnažna> ili <snažna>Strelica prema doljesnažna> do
 povećati ili smanjiti razinu zumiranja.raspon>


<raspon>Razina zumiranja: <snažnarazreda="razina zumiranja">1snažna>raspon>
div>


<divrazreda="kontejner">
<divrazreda="povećalo skriveno">div>
div>
<skriptasrc="/main.js">skripta>
tijelo>

Zamijenite kod u stil.css datoteku sa sljedećim. Također možete koristiti a CSS predprocesor poput Lessa ako želiš:

:korijen {
--širina povećala: 150;
--visina-povećala: 150;
}
tijelo {
prikaz: savijati;
flex-direction: stupac;
align-items: centar;
}


.kontejner {
širina: 400px;
visina: 300px;
veličina pozadine: pokriti;
pozadinska slika: url("https://cdn.pixabay.com/fotografija/2019/03/27/15/24/životinja-4085255_1280.jpg");
pozadinsko ponavljanje: nema-ponoviti;
položaj: relativna;
kursor: nikakav;
}


.povećalo {
granični radijus: 400px;
kutija-sjena: 0px 11px 8px 0px#0000008a;
položaj: apsolutni;
širina: kalk(var(--širina povećala) * 1px);
visina: kalk(var(--visina-povećala) * 1px);
kursor: nikakav;
pozadinska slika: url("https://cdn.pixabay.com/fotografija/2019/03/27/15/24/životinja-4085255_1280.jpg");
pozadinsko ponavljanje: nema-ponoviti;
}


raspon {
prikaz: blok;
}


.Zaglavlje {
prikaz: savijati;
flex-direction: stupac;
align-items: centar;
}


.skriven {
vidljivost: skriven;
}
div > raspon:n-to dijete (3) {
veličina fonta: 20px;
}

u glavni.js datoteku, dohvatite HTML elemente s nazivima klasa, "povećalo" i "spremnik" pomoću document.querySelector metodu i dodijelite ih varijablama povećalo i spremnik, odnosno.

Zatim, pomoću getComputedStyle funkcija dohvatiti širina i visina elementa povećala, a zatim izvucite numeričke vrijednosti iz vraćenih nizova pomoću podniz i indexOf metode.

Dodijelite ekstrahiranu širinu varijabli povećaloWidth, a izvučena visina do povećaloVisina.

neka povećalo = dokument.querySelector(".povećalo");
neka kontejner = dokument.querySelector(".kontejner");
neka magnifierWidth = getComputedStyle (povećalo).width.substring(
0,
 getComputedStyle (povećalo).width.indexOf("p")
);
neka magnifierHeight = getComputedStyle (povećalo).width.substring(
0,
 getComputedStyle (povećalo).height.indexOf("p")
);

Zatim postavite varijable za razinu zumiranja, maksimalnu razinu zumiranja i položaje pokazivača i povećala.

neka zoomLevelLabel = dokument.querySelector(".zoom-level");
neka zumiranje = 2;
neka maxZoomLevel = 5;
neka pokazivač X;
neka pokazivačY;
neka uvećatiX;
neka uvećatiY;

U gornjem bloku koda, pokazivač X i pokazivačY oba predstavljaju položaj pokazivača duž X i Y osi.

Sada definirajte dvije pomoćne funkcije: getZoomLevel koji vraća trenutnu razinu zumiranja i getPointerPosition koji vraća objekt s x i g koordinate kursora.

funkcijagetZoomLevel() {
povratak zum;
}
funkcijagetPointerPosition() {
povratak { x: pokazivač X, g: pokazivačY }
}

Zatim stvorite add an updateMagImage funkcija koja stvara novi objekt MouseEvent s trenutnim položajem kursora i šalje ga elementu spremnika. Ova je funkcija odgovorna za ažuriranje slike povećala.

funkcijaupdateMagImage() {
neka evt = novi MouseEvent("pomak miša", {
 klijentX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 mjehurići: pravi,
 poništivo: pravi,
 pogled: prozor,
 });
 kontejner.dispatchEvent (evt);
}

Sada biste trebali dodati slušatelj događaja na objekt prozora za događaj "keyup" koji prilagođava razinu zumiranja kada korisnik pritisne tipke "ArrowUp" ili "ArrowDown".

Funkcija povratnog poziva na događaju "keyup" također je odgovorna za ažuriranje oznake razine zumiranja i pokretanje updateMagImage funkcija.

prozor.addEventListener("ključ", (e) => {
ako (e.ključ "Strelica gore" && maxZoomLevel - Broj(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zum = zum + 0.3;
 ažuriranjeMagImage();
 }
ako (e.ključ "Strelica prema dolje" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zum = zum - 0.3;
 ažuriranjeMagImage();
 }
});

Zatim dodajte slušatelja događaja elementu spremnika za događaj "mousemove".

​​​​​​

U funkciji povratnog poziva dodajte funkciju koja uklanja "skrivenu" klasu iz elementa povećala u čini ga vidljivim i izračunava položaj miša u odnosu na spremnik, uzimajući u obzir pomicanje stranice račun.

Ova funkcija također treba postaviti stil transformacije povećala na izračunati položaj i odrediti veličinu pozadine i položaj slike povećala na temelju razine zumiranja i miša položaj.

container.addEventListener("pomak miša", (e) => {
 povećalo.classList.remove("skriven");
neka rect = container.getBoundingClientRect();
neka x = e.stranicaX - pravo.lijevo;
neka y = e.stranicaY - rect.top;
 x = x - prozor.scrollX;
 y = y - prozor.scrollY;


 povećalo.style.transform = `prevedi(${x}px, ${y}px)`;
konst imgWidth = 400;
konst imgHeight = 300;


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


 uvećajX = x * getZoomLevel() + 15;
 uvećajY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -uvećajY + "px";
});

Zatim dodajte još jednog slušatelja događaja elementu spremnika, ali ovaj put bi slušatelj događaja trebao slušati događaj "mouseout" i dodajte klasu "hidden" natrag elementu povećala kad god je miš izvan spremnika područje.

container.addEventListener("miš van", () => {
 povećalo.classList.add("skriven");
});

Na kraju, dodajte slušatelja događaja objektu prozora za događaj "pomakni mišem" koji ažurira x i y položaj pokazivača.

prozor.addEventListener("pomak miša", (e) => {
 pokazivačX = e.clientX;
 pokazivačY = e.clientY;
});

To je to! Uspjeli ste izraditi povećalo slike s vanilla JavaScriptom.

Kako povećala slike poboljšavaju korisničko iskustvo

Omogućujući korisnicima da zumiraju određena područja slike, povećalo im omogućuje pregled detalja proizvoda s većom jasnoćom.

Ova poboljšana razina vizualnog istraživanja ulijeva povjerenje korisnicima jer mogu donositi informirane odluke. To može pridonijeti povećanim stopama konverzije i boljem zadržavanju kupaca.