Добавете тази удобна функция към вашите изображения и вашите посетители ще оценят използваемостта и вниманието към детайлите, които сте предоставили.

Ако някога сте разглеждали уебсайт за пазаруване, вероятно сте попадали на функцията за увеличаване на изображението. Позволява ви да увеличите конкретна част от изображение за по-близък изглед. Включването на тази малка, но въздействаща функция може значително да подобри потребителското изживяване на вашия собствен уебсайт.

Изграждането на лупа за изображения по безпроблемен и сплотен начин може да бъде предизвикателство. Но преминаването през тези стъпки ще ви помогне да създадете своя собствена лупа за изображения от нулата, без да е необходимо да разчитате на добавки на трети страни.

Кога да използвате лупа за изображения във вашия уеб проект

Лупата за изображения може да бъде полезна, когато изграждате проект с много изображения. Както споменахме по-рано, увеличителите на изображения са много популярни сред уебсайтовете за пазаруване, тъй като понякога може да се наложи потребителят да разгледа продукта по-отблизо, преди да реши дали си струва да го купи.

instagram viewer

Клиентите разчитат единствено на информацията и визуалните елементи, предоставени от уебсайта, за да оценят качеството, характеристиките и външния вид на продукта. Въпреки това, статичните изображения сами по себе си не винаги могат да осигурят достатъчна яснота или да позволят цялостна оценка на артикула.

В традиционните магазини клиентите могат физически да се справят с продуктите, да ги разгледат отблизо и да оценят тяхната пригодност, преди да купят. Увеличителите на изображения се опитват да пресъздадат това изживяване, като предлагат на потребителите подобно ниво на проверка и изследване виртуално.

Увеличителите на изображения също могат да ви бъдат полезни, ако сте създаване на приложение за фотогалерия тъй като мащабирането на определена част от изображението е важна характеристика.

Изграждане на лупа за изображения

Кодът, използван в този проект, е наличен в a GitHub хранилище и е безплатен за използване под лиценза на MIT.

Създайте папка и в тази папка добавете index.html файл, style.css файл и main.js файл. Добавете този шаблонен код към index.html:

html>
<htmlезик="bg">
<глава>
<метанабор от знаци="UTF-8" />
<метаиме="viewport"съдържание="width=device-width, initial-scale=1.0" />
<заглавие>Увеличител на изображениязаглавие>
<връзкаотн="стилов лист"href="style.css" />
глава>


<тяло>
тяло>
html>

Вътре в тяло tag, създайте div елемент с името на класа "header". След това в div "header" добавете an h1 заглавен елемент, за да покажете заглавието на вашата лупа за изображения.

Можете да персонализирате текста, за да отговаря на вашите нужди. След това включете два span елемента, които предоставят инструкции за използване на лупата и показват текущото ниво на увеличение на потребителя.

След секцията за заглавка създайте a див елемент с име на клас "контейнер". Вътре в този div добавете друг елемент div с името на класа „magnifier“ и приложете класа „hidden“, за да го скриете от изглед.

Този елемент ще представлява изображението на лупата. След това добавете таг на скрипт с атрибута "src", зададен на "/main.js".

<тяло>
<дивклас="заглавка">
<h1>Увеличител на изображенияh1>
<педя>Натиснете <силен>Стрелка нагоресилен> или <силен>Стрелка надолусилен> да се
 увеличаване или намаляване на нивото на увеличение.педя>


<педя>Ниво на увеличение: <силенклас="ниво на увеличение">1силен>педя>
див>


<дивклас="контейнер">
<дивклас="лупа скрита">див>
див>
<сценарийsrc="/main.js">сценарий>
тяло>

Заменете кода в style.css файл със следното. Можете също да използвате a CSS препроцесор като Less ако искаш:

: корен {
--ширина на лупата: 150;
--височина на лупата: 150;
}
тяло {
дисплей: flex;
flex-direction: колона;
подравняване на елементи: център;
}


.контейнер {
ширина: 400px;
височина: 300px;
размер на фона: Покрийте;
фоново изображение: URL адрес("https://cdn.pixabay.com/снимка/2019/03/27/15/24/животно-4085255_1280.jpg");
фоново повторение: не-повтаряне;
позиция: роднина;
курсор: нито един;
}


.лупа {
граница-радиус: 400px;
кутия-сянка: 0px 11px 8px 0px#0000008a;
позиция: абсолютен;
ширина: калк(вар(--ширина на лупата) * 1px);
височина: калк(вар(--височина на лупата) * 1px);
курсор: нито един;
фоново изображение: URL адрес("https://cdn.pixabay.com/снимка/2019/03/27/15/24/животно-4085255_1280.jpg");
фоново повторение: не-повтаряне;
}


педя {
дисплей: блок;
}


.заглавие {
дисплей: flex;
flex-direction: колона;
подравняване на елементи: център;
}


.скрит {
видимост: скрит;
}
див > педя:nth-child (3) {
размер на шрифта: 20px;
}

В main.js файл, извлечете HTML елементите с имена на класове, "лупа" и "контейнер", като използвате document.querySelector метод и ги присвоете на променливите лупа и контейнер, съответно.

След това, използвайки getComputedStyle функция извличане на ширина и височина на елемента лупа и след това извлечете числовите стойности от върнатите низове, като използвате подниз и индекс на методи.

Присвоете извлечената ширина на променливата лупаWidth, а извлечената височина до Височина на лупата.

позволявам лупа = документ.querySelector(".лупа");
позволявам контейнер = документ.querySelector(".контейнер");
позволявам magnifierWidth = getComputedStyle (лупа).width.substring(
0,
 getComputedStyle (лупа).width.indexOf("p")
);
позволявам magnifierHeight = getComputedStyle (лупа).width.substring(
0,
 getComputedStyle (лупа).height.indexOf("p")
);

След това задайте променливите за нивото на мащабиране, максималното ниво на мащабиране и позициите на курсора и изображението на лупата.

позволявам zoomLevelLabel = документ.querySelector(".ниво на увеличение");
позволявам увеличение = 2;
позволявам maxZoomLevel = 5;
позволявам показалец X;
позволявам указател Y;
позволявам увеличи X;
позволявам увеличавам Y;

В кодовия блок по-горе, показалец X и указател Y и двете представляват позицията на курсора по осите X и Y.

Сега дефинирайте две помощни функции: getZoomLevel което връща текущото ниво на увеличение и getPointerPosition който връща обект с х и г координати на курсора.

функцияgetZoomLevel() {
връщане мащабиране;
}
функцияgetPointerPosition() {
връщане { х: показалец X, г: показалецY }
}

След това създайте add an updateMagImage функция, която създава нов обект MouseEvent с текущата позиция на курсора и го изпраща към контейнерния елемент. Тази функция отговаря за актуализирането на изображението на лупата.

функцияupdateMagImage() {
позволявам evt = нов MouseEvent("преместване на мишката", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 балончета: вярно,
 отменяем: вярно,
 изглед: прозорец,
 });
 container.dispatchEvent (evt);
}

Сега трябва да добавите слушател на събития към обекта прозорец за събитието "keyup", което регулира нивото на мащабиране, когато потребителят натисне клавишите "ArrowUp" или "ArrowDown".

Функцията за обратно извикване на събитието "keyup" също е отговорна за актуализирането на етикета за ниво на мащабиране и задействането на updateMagImage функция.

прозорец.addEventListener("ключ", (e) => {
ако (е.ключ "Стрелка нагоре" && maxZoomLevel - Номер(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 мащабиране = мащабиране + 0.3;
 updateMagImage();
 }
ако (е.ключ "Стрелка надолу" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 мащабиране = мащабиране - 0.3;
 updateMagImage();
 }
});

След това добавете слушател на събития към контейнерния елемент за събитието "mousemove".

​​​​​​

Във функцията за обратно извикване добавете функционалността, която премахва "скрития" клас от елемента на лупата към прави го видим и изчислява позицията на мишката спрямо контейнера, като включва превъртането на страницата сметка.

Тази функция трябва също да зададе стила на трансформация на лупата на изчислената позиция и определя размера на фона и позицията на изображението на лупата въз основа на нивото на увеличение и мишката позиция.

container.addEventListener("преместване на мишката", (e) => {
 magnifier.classList.remove("скрит");
позволявам rect = container.getBoundingClientRect();
позволявам x = e.pageX - rect.left;
позволявам y = e.pageY - rect.top;
 х = х - прозорец.scrollX;
 у = у - прозорец.scrollY;


 magnifier.style.transform = `превод(${x}px, ${y}px)`;
конст imgWidth = 400;
конст imgHeight = 300;


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


 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -увеличиY + "px";
});

След това добавете друг слушател на събития към контейнерния елемент, но този път слушателят на събития трябва да слуша за събитие "mouseout" и добавете класа "hidden" обратно към елемента на лупата, когато мишката е извън контейнера ■ площ.

container.addEventListener("мишка аут", () => {
 magnifier.classList.add("скрит");
});

И накрая, добавете слушател на събития към обекта прозорец за събитието "mousemove", което актуализира позициите x и y на курсора.

прозорец.addEventListener("преместване на мишката", (e) => {
 указателX = e.clientX;
 указателY = e.clientY;
});

Това е! Успяхте да създадете лупа за изображения с ванилен JavaScript.

Как лупите за изображения подобряват потребителското изживяване

Като позволява на потребителите да увеличават мащаба на определени области от изображението, лупата им позволява да разглеждат детайлите на продукта с по-голяма яснота.

Това подобрено ниво на визуално изследване вдъхва увереност на потребителите, тъй като те могат да вземат информирани решения. Това може да допринесе за повишен процент на реализация и подобрено задържане на клиенти.