Pridajte túto užitočnú funkciu k svojim obrázkom a vaši návštevníci ocenia použiteľnosť a pozornosť venovanú detailom, ktoré ste im poskytli.

Ak ste si niekedy prezerali webovú stránku s nákupmi, pravdepodobne ste narazili na funkciu zväčšovania obrázkov. Umožní vám priblížiť konkrétnu časť obrázka pre bližší pohľad. Začlenenie tejto malej, ale pôsobivej funkcie môže výrazne zlepšiť používateľskú skúsenosť na vašej vlastnej webovej lokalite.

Vytvorenie zväčšovača obrazu bezproblémovým a súdržným spôsobom môže byť výzvou. Prechádzka týmito krokmi vám však pomôže vytvoriť si vlastnú lupu od začiatku bez toho, aby ste sa museli spoliehať na doplnky tretích strán.

Kedy použiť zväčšovač obrázkov vo svojom webovom projekte

Zväčšovač obrázkov sa môže hodiť, keď vytvárate projekt s množstvom obrázkov. Ako už bolo spomenuté, zväčšovače obrázkov sú na nákupných weboch veľmi obľúbené, pretože niekedy sa môže stať, že používateľ sa bude musieť na produkt bližšie pozrieť, kým sa rozhodne, či sa oplatí kúpiť.

instagram viewer

Zákazníci sa pri posudzovaní kvality, funkcií a vzhľadu produktu spoliehajú výlučne na informácie a vizuály, ktoré im poskytuje webová lokalita. Samotné statické obrázky však nemusia vždy poskytnúť dostatočnú jasnosť alebo umožniť komplexné vyhodnotenie položky.

V tradičných predajniach môžu zákazníci s výrobkami fyzicky manipulovať, zblízka si ich prezrieť a pred kúpou vyhodnotiť ich vhodnosť. Zväčšovače obrázkov sa pokúšajú obnoviť tento zážitok tým, že používateľom ponúkajú podobnú úroveň kontroly a skúmania virtuálne.

Ak ste, môžu sa vám hodiť aj lupy vytvorenie aplikácie fotogalérie pretože priblíženie na konkrétnu časť obrazu je dôležitou vlastnosťou.

Vytváranie lupy

Kód použitý v tomto projekte je dostupný v a úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT.

Vytvorte priečinok a do tohto priečinka pridajte priečinok index.html súbor, style.css súbor a main.js súbor. Pridajte tento štandardný kód na index.html:

html>
<htmllang="sk">
<hlavu>
<metaznakovú sadu="UTF-8" />
<metanázov="výrez"obsahu="width=device-width, initial-scale=1.0" />
<titul>Zväčšovač obrázkovtitul>
<odkazrel="štýlov"href="style.css" />
hlavu>


<telo>
telo>
html>

Vnútri telo tag, vytvorte prvok div s názvom triedy "header". Potom do div "hlavička" pridajte an h1 nadpis na zobrazenie názvu vašej lupy.

Text si môžete prispôsobiť podľa svojich potrieb. Ďalej zahrňte dva prvky rozsahu, ktoré poskytujú pokyny na používanie lupy a zobrazujú používateľovi aktuálnu úroveň priblíženia.

Po sekcii hlavičky vytvorte a div prvok s názvom triedy "kontajner". Do tohto prvku div pridajte ďalší prvok div s názvom triedy „lupa“ a aplikujte triedu „skrytá“, aby ste ho skryli.

Tento prvok bude predstavovať obrázok lupy. Potom pridajte značku skriptu s atribútom "src" nastaveným na "/main.js".

<telo>
<divtrieda="hlavička">
<h1>Zväčšovač obrázkovh1>
<rozpätie>Stlačte tlačidlo <silný>Šípka horesilný> alebo <silný>Šípka nadolsilný> do
 zvýšiť alebo znížiť úroveň priblíženia.rozpätie>


<rozpätie>Úroveň priblíženia: <silnýtrieda="úroveň priblíženia">1silný>rozpätie>
div>


<divtrieda="kontajner">
<divtrieda="lupa skrytá">div>
div>
<skriptsrc="/main.js">skript>
telo>

Nahraďte kód v style.css súbor s nasledujúcim. Môžete tiež použiť a CSS preprocesor ako Less Ak chceš:

:koreň {
--šírka lupy: 150;
--výška lupy: 150;
}
telo {
displej: flex;
flex-direction: stĺpec;
align-items: stred;
}


.kontajner {
šírka: 400px;
výška: 300px;
veľkosť pozadia: kryt;
obrázok na pozadí: url("https://cdn.pixabay.com/fotografiu/2019/03/27/15/24/zviera-4085255_1280.jpg");
pozadie-opakovať: bez opakovania;
pozíciu: príbuzný;
kurzor: žiadny;
}


.lupa {
hraničný polomer: 400px;
box-shadow: 0px 11px 8px 0px#0000008a;
pozíciu: absolútne;
šírka: calc(var(--šírka lupy) * 1px);
výška: calc(var(--výška lupy) * 1px);
kurzor: žiadny;
obrázok na pozadí: url("https://cdn.pixabay.com/fotografiu/2019/03/27/15/24/zviera-4085255_1280.jpg");
pozadie-opakovať: bez opakovania;
}


rozpätie {
displej: blokovať;
}


.hlavička {
displej: flex;
flex-direction: stĺpec;
align-items: stred;
}


.skrytý {
viditeľnosť: skryté;
}
div > rozpätie:n-té dieťa (3) {
veľkosť písma: 20px;
}

V main.js získajte prvky HTML s názvami tried, "lupou" a "kontajnerom" pomocou súboru document.querySelector a priraďte ich k premenným lupa a kontajner, resp.

Potom pomocou getComputedStyle funkciu načítať šírka a výška prvku lupy a potom pomocou príkazu extrahujte číselné hodnoty z vrátených reťazcov podreťazec a indexOf metódy.

Priraďte extrahovanú šírku k premennej lupaŠírkaa extrahovaná výška do lupaVýška.

nech lupa = dokument.querySelector(".lupa");
nech kontajner = dokument.querySelector(".kontajner");
nech magnifierWidth = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).width.indexOf("p")
);
nech magnifierHeight = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).height.indexOf("p")
);

Ďalej nastavte premenné pre úroveň priblíženia, maximálnu úroveň priblíženia a polohy kurzora a obrazu lupy.

nech zoomLevelLabel = dokument.querySelector(".zoom-level");
nech zoom = 2;
nech maxZoomLevel = 5;
nech ukazovateľX;
nech ukazovateľY;
nech zväčšenieX;
nech zväčšiťY;

Vo vyššie uvedenom bloku kódu pointerX a ukazovateľY obe predstavujú polohu kurzora pozdĺž osi X a Y.

Teraz definujte dve pomocné funkcie: getZoomLevel ktorý vráti aktuálnu úroveň priblíženia a getPointerPosition ktorý vráti objekt s X a r súradnice kurzora.

funkciugetZoomLevel() {
vrátiť zoom;
}
funkciugetPointerPosition() {
vrátiť { X: pointerX, r: pointerY }
}

Ďalej vytvorte add an aktualizovaťMagImage funkcia, ktorá vytvorí nový objekt MouseEvent s aktuálnou pozíciou kurzora a odošle ho do prvku kontajnera. Táto funkcia je zodpovedná za aktualizáciu obrazu lupy.

funkciuaktualizovaťMagImage() {
nech evt = Nový MouseEvent("mousemove", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 bubliny: pravda,
 zrušiteľné: pravda,
 vyhliadka: okno,
 });
 container.dispatchEvent (evt);
}

Teraz by ste mali pridať poslucháč udalosti na objekt okna pre udalosť „keyup“, ktorá upraví úroveň priblíženia, keď používateľ stlačí klávesy „šípka hore“ alebo „šípka dole“.

Funkcia spätného volania pri udalosti "keyup" je tiež zodpovedná za aktualizáciu označenia úrovne priblíženia a spustenie aktualizovaťMagImage funkciu.

okno.addEventListener("kľúč", (e) => {
ak (e.kľúč "šípka hore" && maxZoomLevel - číslo(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zoom = zoom + 0.3;
 updateMagImage();
 }
ak (e.kľúč "šípka nadol" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoom = zoom - 0.3;
 updateMagImage();
 }
});

Potom pridajte prijímač udalosti do prvku kontajnera pre udalosť „mousemove“.

​​​​​​

Vo funkcii spätného volania pridajte funkciu, ktorá odstráni „skrytú“ triedu z prvku lupy zviditeľní a vypočíta polohu myši vzhľadom ku kontajneru, pričom prejde na stránku účtu.

Táto funkcia by mala tiež nastaviť štýl transformácie lupy na vypočítanú polohu a určiť veľkosť pozadia a polohu obrazu lupy na základe úrovne priblíženia a myši pozíciu.

container.addEventListener("mousemove", (e) => {
 magnifier.classList.remove("skrytý");
nech rect = kontajner.getBoundingClientRect();
nech x = e.stranaX - pravouhl.vľavo;
nech y = e.stranaY - rect.top;
 x = x - okno.scrollX;
 y = y - okno.scrollY;


 lupa.štýl.premena = `preložiť($ {x}px, ${y}px)“.;
konšt imgWidth = 400;
konšt imgVýška = 300;


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


 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -zväčšiťY + "px";
});

Potom pridajte ďalší poslucháč udalosti do prvku kontajnera, ale tentoraz by mal počúvať poslucháč udalosti udalosť "mouseout" a pridajte "skrytú" triedu späť do prvku lupy vždy, keď je myš mimo kontajnera oblasť.

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

Nakoniec pridajte poslucháč udalostí do objektu okna pre udalosť "mousemove", ktorá aktualizuje pozície x a y kurzora.

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

To je všetko! Podarilo sa vám vytvoriť lupu s vanilkovým JavaScriptom.

Ako zväčšovače obrázkov zlepšujú používateľskú skúsenosť

Tým, že používateľom umožňuje priblížiť si konkrétne oblasti obrázka, lupa im umožňuje prezerať detaily produktu s väčšou jasnosťou.

Táto vylepšená úroveň vizuálneho prieskumu vzbudzuje dôveru v používateľov, pretože môžu robiť informované rozhodnutia. To môže prispieť k zvýšeniu miery konverzie a lepšiemu udržaniu zákazníkov.