Lisää tämä kätevä ominaisuus kuviisi, niin vierailijasi arvostavat tarjoamaasi käytettävyyttä ja huomiota yksityiskohtiin.

Jos olet joskus selannut ostossivustoa, olet todennäköisesti törmännyt kuvan suurennusominaisuuteen. Sen avulla voit lähentää kuvan tiettyä osaa nähdäksesi tarkemmin. Tämän pienen mutta vaikuttavan ominaisuuden sisällyttäminen voi parantaa merkittävästi oman verkkosivustosi käyttökokemusta.

Kuvan suurennuslasin rakentaminen saumattomalla ja yhtenäisellä tavalla voi olla haaste. Mutta näiden vaiheiden läpi käyminen auttaa sinua luomaan oman kuvan suurennuslasin tyhjästä ilman, että sinun tarvitsee luottaa kolmannen osapuolen laajennuksiin.

Milloin käyttää kuvan suurennuslasia verkkoprojektissasi

Kuvan suurennuslasi voi olla hyödyllinen, kun rakennat projektia, jossa on paljon kuvia. Kuten aiemmin mainittiin, kuvan suurennuslasit ovat erittäin suosittuja ostossivustoilla, koska joskus käyttäjän on ehkä tarkasteltava tuotetta tarkemmin ennen kuin päättää, kannattaako se ostaa.

instagram viewer

Asiakkaat luottavat yksinomaan verkkosivuston tarjoamiin tietoihin ja visuaalisiin tuotteisiin arvioidakseen tuotteen laatua, ominaisuuksia ja ulkonäköä. Staattiset kuvat eivät kuitenkaan aina välttämättä tarjoa riittävää selkeyttä tai mahdollista kohteen kokonaisvaltaista arviointia.

Perinteisissä myymälöissä asiakkaat voivat käsitellä tuotteita fyysisesti, tutkia niitä läheltä ja arvioida niiden sopivuutta ennen ostamista. Kuvan suurennuslaitteet yrittävät luoda tämän kokemuksen uudelleen tarjoamalla käyttäjille samantasoisen tarkastelun ja tutkimisen virtuaalisesti.

Kuvan suurennuslasit voivat myös olla hyödyllisiä, jos olet valokuvagalleriasovelluksen rakentaminen koska zoomaus tiettyyn kuvan osaan on tärkeä ominaisuus.

Kuvan suurennuslasin rakentaminen

Tässä projektissa käytetty koodi on saatavilla a GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena.

Luo kansio ja lisää siihen kansioon index.html tiedosto, tyyli.css tiedosto ja main.js tiedosto. Lisää tämä yleiskoodi hakemistoon index.html:

html>
<htmllang="en">
<pää>
<metamerkkisetti="UTF-8" />
<metanimi="näkymä"sisältö="leveys = laitteen leveys, alkumittakaava = 1,0" />
<otsikko>Kuvan suurennuslasiotsikko>
<linkkirel="tyylitaulukko"href="tyyli.css" />
pää>


<kehon>
kehon>
html>

Sisällä kehon -tunniste, luo div-elementti luokan nimellä "header". Lisää sitten otsikko-osaan an h1 otsikkoelementti näyttääksesi kuvan suurennuslasin otsikon.

Voit muokata tekstiä tarpeidesi mukaan. Sisällytä seuraavaksi kaksi span elementtiä, jotka antavat ohjeet suurennuslasin käyttöön ja näyttävät nykyisen zoomaustason käyttäjälle.

Luo otsikkoosion jälkeen a div elementti luokan nimellä "container". Lisää tähän div-elementtiin toinen div-elementti luokan nimellä "suurennuslasi" ja käytä "piilotettu"-luokkaa piilottaaksesi sen näkyvistä.

Tämä elementti edustaa suurennuslasin kuvaa. Lisää sitten komentosarjatunniste, jonka "src"-attribuutiksi on asetettu "/main.js".

<kehon>
<divluokkaa="otsikko">
<h1>Kuvan suurennuslasih1>
<jänneväli>Lehdistö <vahva>Nuoli ylösvahva> tai <vahva>Nuoli alasvahva> to
 lisää tai vähennä zoomaustasoa.jänneväli>


<jänneväli>Zoomaustaso: <vahvaluokkaa="zoomaustaso">1vahva>jänneväli>
div>


<divluokkaa="kontti">
<divluokkaa="suurennuslasi piilossa">div>
div>
<käsikirjoitussrc="/main.js">käsikirjoitus>
kehon>

Vaihda koodi kohtaan tyyli.css tiedosto seuraavalla. Voit myös käyttää a CSS-esiprosessori, kuten Less jos haluat:

:root {
--suurentimen leveys: 150;
--suurentimen korkeus: 150;
}
kehon {
näyttö: flex;
flex-suunta: sarakkeessa;
kohdista kohteet: keskusta;
}


.container {
leveys: 400px;
korkeus: 300px;
taustan kokoinen: peite;
taustakuva: url("https://cdn.pixabay.com/kuva/2019/03/27/15/24/eläin-4085255_1280.jpg");
taustatoisto: ei-toistoa;
asema: suhteellinen;
kohdistin: ei mitään;
}


.suurennuslasi {
raja-säde: 400px;
laatikko-varjo: 0px 11px 8px 0px#0000008a;
asema: ehdoton;
leveys: lask(var(--suurentimen leveys) * 1px);
korkeus: lask(var(--suurentimen korkeus) * 1px);
kohdistin: ei mitään;
taustakuva: url("https://cdn.pixabay.com/kuva/2019/03/27/15/24/eläin-4085255_1280.jpg");
taustatoisto: ei-toistoa;
}


jänneväli {
näyttö: lohko;
}


.header {
näyttö: flex;
flex-suunta: sarakkeessa;
kohdista kohteet: keskusta;
}


.piilotettu {
näkyvyys: piilotettu;
}
div > jänneväli:nth-lapsi (3) {
Fonttikoko: 20px;
}

Vuonna main.js tiedosto, noutaa HTML-elementit luokkanimien, "suurennuslasin" ja "säilön" avulla document.querySelector menetelmällä ja kohdista ne muuttujiin suurennuslasi ja kontti, vastaavasti.

Sitten käyttämällä getComputedStyle toiminto hakea leveys ja korkeus suurennuselementistä ja poimi sitten numeeriset arvot palautetuista merkkijonoista käyttämällä alamerkkijono ja sisällysluettelo menetelmiä.

Määritä muuttujalle erotettu leveys suurennuslasiLeveys, ja erotettu korkeus suurennuslasiKorkeus.

antaa suurennuslasi = asiakirja.querySelector(".suurennuslasi");
antaa kontti = asiakirja.querySelector(".container");
antaa magnifierWidth = getComputedStyle (suurennuslasi).width.substring(
0,
 getComputedStyle (suurennuslasi).width.indexOf("p")
);
antaa magnifierHeight = getComputedStyle (suurennuslasi).width.substring(
0,
 getComputedStyle (suurennuslasi).height.indexOf("p")
);

Määritä seuraavaksi muuttujat zoomaustasolle, suurimmalle zoomaustasolle sekä kohdistimen ja suurennuslasin kuvan sijainnille.

antaa zoomLevelLabel = asiakirja.querySelector(".zoom-level");
antaa zoomaus = 2;
antaa maxZoomLevel = 5;
antaa pointerX;
antaa osoitinY;
antaa suurentaaX;
antaa suurentaaY;

Yllä olevassa koodilohkossa pointerX ja osoitinY molemmat edustavat kursorin sijaintia X- ja Y-akselilla.

Määritä nyt kaksi aputoimintoa: getZoomLevel joka palauttaa nykyisen zoomaustason, ja getPointerPosition joka palauttaa objektin kanssa x ja y kursorin koordinaatit.

toimintogetZoomLevel() {
palata Zoomaus;
}
toimintogetPointerPosition() {
palata { x: pointerX, y: pointerY }
}

Luo seuraavaksi lisäys päivitäMagImage toiminto, joka luo uuden MouseEvent-objektin nykyisellä kohdistimen sijainnilla ja lähettää sen säiliöelementtiin. Tämä toiminto vastaa suurennuslasin kuvan päivityksestä.

toimintopäivitäMagImage() {
antaa evt = Uusi MouseEvent("mousemove", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 kuplia: totta,
 peruutettava: totta,
 näytä: ikkuna,
 });
 container.dispatchEvent (evt);
}

Nyt sinun pitäisi lisätä tapahtumien kuuntelija "keyup"-tapahtuman ikkunaobjektiin, joka säätää zoomaustasoa, kun käyttäjä painaa "ArrowUp"- tai "ArrowDown"-näppäimiä.

Takaisinsoittotoiminto "keyup"-tapahtumassa vastaa myös zoomaustason tarran päivittämisestä ja päivitäMagImage toiminto.

ikkuna.addEventListener("näppäin", (e) => {
jos (e.avain "Nuoli ylös" && maxZoomLevel - Määrä(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zoomaus = zoomaus + 0.3;
 päivitäMagImage();
 }
jos (e.avain "Nuoli alas" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoom = zoom - 0.3;
 päivitäMagImage();
 }
});

Lisää sitten tapahtuman kuuntelija "mousemove"-tapahtuman säilöelementtiin.

​​​​​​

Lisää takaisinsoittotoimintoon toiminto, joka poistaa "piilotetun" luokan suurennuselementistä tehdä sen näkyväksi ja laskee hiiren sijainnin säilöön nähden, jolloin sivua vieritetään tili.

Tämän toiminnon tulisi myös asettaa suurennuslasin muunnostyyli laskettuun kohtaan ja määrittää suurennuslasin kuvan taustan koon ja sijainnin zoomaustason ja hiiren perusteella asema.

container.addEventListener("mousemove", (e) => {
 magnifier.classList.remove("piilotettu");
antaa rect = container.getBoundingClientRect();
antaa x = e.sivuX - rect.left;
antaa y = e.sivuY - rect.top;
 x = x - ikkuna.scrollX;
 y = y - ikkuna.scrollY;


 magnifier.style.transform = `käännä(${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" + -suurennaY + "px";
});

Lisää sitten toinen tapahtumaseuraaja konttielementtiin, mutta tällä kertaa tapahtuman kuuntelijan tulee kuunnella "mouseout" -tapahtuma ja lisää "piilotettu" luokka takaisin suurennuselementtiin aina, kun hiiri on poissa säiliöstä alueella.

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

Lisää lopuksi tapahtuman kuuntelija "mousemove"-tapahtuman ikkunaobjektiin, joka päivittää kohdistimen x- ja y-asemat.

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

Se siitä! Olet onnistunut rakentamaan kuvan suurennuslasin vanilja JavaScriptillä.

Kuinka kuvan suurennuslasit parantavat käyttökokemusta

Suurennuslasin avulla käyttäjät voivat zoomata kuvan tiettyihin kohtiin, joten he voivat tarkastella tuotetietoja tarkemmin.

Tämä visuaalisen tutkimisen tehostettu taso herättää käyttäjien luottamusta, koska he voivat tehdä tietoisia päätöksiä. Tämä voi parantaa konversioprosentteja ja parantaa asiakkaiden säilyttämistä.