Lisage see mugav funktsioon oma piltidele ja teie külastajad hindavad teie pakutavat kasutatavust ja tähelepanu detailidele.

Kui olete kunagi mõnda ostuveebisaiti sirvinud, olete tõenäoliselt kohanud pildi suurendamise funktsiooni. See võimaldab teil lähemale vaatamiseks pildi teatud osa sisse suumida. Selle väikese, kuid mõjuka funktsiooni kaasamine võib teie veebisaidi kasutajakogemust oluliselt parandada.

Pildisuurendi sujuvalt ja ühtselt ehitamine võib olla väljakutse. Kuid nende sammude läbimine aitab teil luua nullist oma pildiluubi, ilma et peaksite lootma kolmandate osapoolte pistikprogrammidele.

Millal kasutada oma veebiprojektis pildiluubi

Pildisuurendus võib olla kasulik, kui ehitate palju pilte sisaldavat projekti. Nagu varem mainitud, on pildiluubid ostuveebisaitidel väga populaarsed, sest mõnikord võib kasutajal tekkida vajadus tootega lähemalt tutvuda, enne kui otsustab, kas see on ostmist väärt.

Kliendid toetuvad toote kvaliteedi, omaduste ja välimuse hindamiseks ainult veebisaidilt pakutavale teabele ja visuaalidele. Siiski ei pruugi staatilised kujutised üksi alati anda piisavat selgust ega võimaldada üksuse igakülgset hindamist.

instagram viewer

Traditsioonilistes kauplustes saavad kliendid tooteid füüsiliselt käsitseda, neid lähedalt uurida ja enne ostmist hinnata nende sobivust. Pildi suurendajad püüavad seda kogemust uuesti luua, pakkudes kasutajatele sarnasel tasemel kontrolli ja virtuaalset uurimist.

Pildi suurendajad võivad samuti kasuks tulla, kui olete fotogalerii rakenduse ehitamine kuna pildi teatud osasse suumimine on oluline funktsioon.

Pildi suurendaja ehitamine

Selles projektis kasutatav kood on saadaval a GitHubi hoidla ja seda saate MIT-i litsentsi alusel tasuta kasutada.

Looge kaust ja lisage sellesse kausta index.html fail, stiil.css fail ja main.js faili. Lisage see standardkood saidile index.html:

html>
<htmllang="en">
<pea>
<metamärgistik="UTF-8" />
<metanimi="vaateava"sisu="laius = seadme laius, esialgne skaala = 1,0" />
<pealkiri>Pildi luuppealkiri>
<linkrel="laadileht"href="stiil.css" />
pea>


<keha>
keha>
html>

Sees keha tag, loo div element klassi nimega "päis". Seejärel lisage jaotisesse "päis" an h1 pealkirja element, et kuvada teie pildisuurendi pealkiri.

Saate kohandada teksti vastavalt oma vajadustele. Järgmisena lisage kaks ulatuseelementi, mis annavad juhised suurendi kasutamiseks ja kuvavad kasutajale praeguse suumitaseme.

Pärast päise jaotist looge a div element klassinimega "konteiner". Selle div sisse lisage veel üks div element klassi nimega "luup" ja rakendage klassi "peidetud", et see vaate eest peita.

See element esindab suurenduspilti. Seejärel lisage skriptimärgend, mille atribuudiks "src" on seatud "/main.js".

<keha>
<divklass="päis">
<h1>Pildi luuph1>
<ulatus>Vajutage <tugev>Nool ülestugev> või <tugev>Nool allatugev> juurde
 suurendage või vähendage suumi taset.ulatus>


<ulatus>Suumi tase: <tugevklass="suumi tase">1tugev>ulatus>
div>


<divklass="konteiner">
<divklass="luup peidetud">div>
div>
<stsenaariumsrc="/main.js">stsenaarium>
keha>

Asendage kood jaotises stiil.css faili järgmisega. Võite kasutada ka a CSS-i eelprotsessor nagu Less kui sa tahad:

:juur {
--luubi laius: 150;
--luubi kõrgus: 150;
}
keha {
kuva: painduv;
painduv suund: veerg;
joondada-üksused: Keskus;
}


.konteiner {
laius: 400px;
kõrgus: 300px;
tausta suurus: kaas;
taustapilt: url("https://cdn.pixabay.com/foto/2019/03/27/15/24/loom-4085255_1280.jpg");
taustakordus: ei-korda;
positsiooni: sugulane;
kursor: mitte ühtegi;
}


.luup {
piiriraadius: 400px;
kast-vari: 0px 11px 8px 0px#0000008a;
positsiooni: absoluutne;
laius: arvut(var(--luubi laius) * 1px);
kõrgus: arvut(var(--luubi kõrgus) * 1px);
kursor: mitte ühtegi;
taustapilt: url("https://cdn.pixabay.com/foto/2019/03/27/15/24/loom-4085255_1280.jpg");
taustakordus: ei-korda;
}


ulatus {
kuva: blokk;
}


.päis {
kuva: painduv;
painduv suund: veerg;
joondada-üksused: Keskus;
}


.peidetud {
nähtavus: peidetud;
}
div > ulatus:nth-laps (3) {
fondi suurus: 20px;
}

Aastal main.js faili, hankige HTML-i elemendid koos klassinimede, "luubi" ja "konteineriga", kasutades document.querySelector meetodit ja määrake need muutujatele luup ja konteiner, vastavalt.

Seejärel, kasutades getComputedStyle funktsioon hankida laius ja kõrgus suurenduselemendi elemendist ja eraldage seejärel numbrilised väärtused tagastatud stringidest, kasutades alamstring ja indeks meetodid.

Määrake muutujale eraldatud laius luupWidthja eraldatud kõrgus kuni luup Kõrgus.

lase luup = dokument.querySelector(".luup");
lase konteiner = dokument.querySelector(".konteiner");
lase luupWidth = getComputedStyle (suurendus).width.substring(
0,
 getComputedStyle (suurendus).width.indexOf("p")
);
lase luupHeight = getComputedStyle (suurendus).width.substring(
0,
 getComputedStyle (suurendus).height.indexOf("p")
);

Järgmisena seadistage suumitaseme, maksimaalse suumitaseme ning kursori ja luubi kujutise asukoha muutujad.

lase zoomLevelLabel = dokument.querySelector(". zoom-level");
lase suum = 2;
lase maxZoomLevel = 5;
lase pointerX;
lase pointerY;
lase suurendaX;
lase suurenda Y;

Ülaltoodud koodiplokis pointerX ja osutiY mõlemad tähistavad kursori asukohta piki X- ja Y-telge.

Nüüd määratlege kaks abifunktsiooni: getZoomLevel mis tagastab praeguse suumitaseme ja getPointerPosition mis tagastab objekti koos x ja y kursori koordinaadid.

funktsioonigetZoomLevel() {
tagasi suum;
}
funktsioonigetPointerPosition() {
tagasi { x: pointerX, y: pointerY }
}

Järgmisena looge lisamine updateMagImage funktsioon, mis loob kursori praeguse asukohaga uue MouseEvent objekti ja saadab selle konteinerielemendile. See funktsioon vastutab luubi pildi värskendamise eest.

funktsiooniupdateMagImage() {
lase evt = uus MouseEvent("hiire liigutamine", {
 klientX: getPointerPosition().x,
 klientY: getPointerPosition().y,
 mullid: tõsi,
 tühistatav: tõsi,
 vaade: aken,
 });
 konteiner.dispatchEvent (evt);
}

Nüüd peaksite lisama sündmuste kuulaja aknaobjektile sündmuse "keyup" jaoks, mis reguleerib suumitaset, kui kasutaja vajutab "Noole üles" või "ArrowDown" klahve.

Tagasihelistamise funktsioon sündmusel "keyup" vastutab ka suumitaseme sildi värskendamise ja updateMagImage funktsiooni.

aken.addEventListener("klahv", (e) => {
kui (e. võti "Nool üles" && maxZoomLevel - Number(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 suum = suum + 0.3;
 updateMagImage();
 }
kui (e. võti "Nool alla" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 suum = suum - 0.3;
 updateMagImage();
 }
});

Seejärel lisage sündmuse "mousemove" konteinerelemendile sündmustekuulaja.

​​​​​​

Lisage tagasihelistamisfunktsioonis funktsioon, mis eemaldab "peidetud" klassi luubi elemendist muuta see nähtavaks ja arvutab hiire asukoha konteineri suhtes, võttes arvesse lehe kerimist konto.

See funktsioon peaks määrama ka luubi teisendusstiili arvutatud asendisse ja määrake suurenduspildi tausta suurus ja asukoht suumitaseme ja hiire põhjal positsiooni.

container.addEventListener("hiire liigutamine", (e) => {
 magnifier.classList.remove("peidetud");
lase rect = konteiner.getBoundingClientRect();
lase x = e.lehtX - rect.left;
lase y = e.pageY - rect.top;
 x = x - aken.scrollX;
 y = y - aken.scrollY;


 luup.style.transform = `tõlgi (${x}px, ${y}px)".;
konst imgWidth = 400;
konst imgKõrgus = 300;


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


 magnifyX = x * getZoomLevel() + 15;
 suurenda Y = y * getZoomLevel() + 15;
 luup.style.backgroundPosition = -magnifyX + "px" + -suurenda Y + "px";
});

Seejärel lisage konteineri elemendile veel üks sündmustekuulaja, kuid seekord peaks sündmuste kuulaja kuulama sündmus "mouseout" ja lisage "peidetud" klass uuesti luubi elemendile, kui hiir on konteinerist väljas ala.

container.addEventListener("hiire välja", () => {
 magnifier.classList.add("peidetud");
});

Lõpuks lisage sündmusekuulaja aknaobjektile sündmuse "mousemove" jaoks, mis värskendab kursori x- ja y-positsioone.

aken.addEventListener("hiire liigutamine", (e) => {
 pointerX = e.klientX;
 pointerY = e.klientY;
});

See on kõik! Teil on õnnestunud vanilje JavaScriptiga luua pildisuurendus.

Kuidas pildiluubid kasutajakogemust parandavad

Võimaldades kasutajatel pildi teatud alasid sisse suumida, võimaldab luup neil toote üksikasju selgemalt uurida.

See visuaalse uurimise täiustatud tase sisendab kasutajates usaldust, kuna nad saavad teha teadlikke otsuseid. See võib aidata suurendada konversioonimäärasid ja parandada klientide hoidmist.