Bu kullanışlı özelliği resimlerinize ekleyin, ziyaretçileriniz kullanılabilirliği ve sağladığınız ayrıntılara gösterilen özeni takdir edeceklerdir.

Daha önce bir alışveriş sitesine göz attıysanız, muhtemelen görüntü büyüteç özelliğiyle karşılaşmışsınızdır. Daha yakından görmek için görüntünün belirli bir bölümünü yakınlaştırmanıza olanak tanır. Bu küçük ama etkili özelliği dahil etmek, kendi web sitenizdeki kullanıcı deneyimini büyük ölçüde geliştirebilir.

Kesintisiz ve uyumlu bir şekilde bir görüntü büyüteci oluşturmak zor olabilir. Ancak bu adımlardan geçmek, üçüncü taraf eklentilere güvenmenize gerek kalmadan kendi görüntü büyütücünüzü sıfırdan oluşturmanıza yardımcı olacaktır.

Web Projenizde Görüntü Büyüteç Ne Zaman Kullanılır?

Çok sayıda görüntü içeren bir proje oluştururken bir görüntü büyüteci kullanışlı olabilir. Daha önce de belirtildiği gibi, görüntü büyütücüler alışveriş web sitelerinde çok popülerdir çünkü bazen kullanıcının satın almaya değer olup olmadığına karar vermeden önce ürüne daha yakından bakması gerekebilir.

instagram viewer

Müşteriler, bir ürünün kalitesini, özelliklerini ve görünümünü değerlendirmek için yalnızca web sitesi tarafından sağlanan bilgilere ve görsellere güvenirler. Ancak, tek başına statik görüntüler her zaman yeterli netliği sağlamayabilir veya öğenin kapsamlı bir şekilde değerlendirilmesine izin vermeyebilir.

Geleneksel mağazalarda müşteriler, ürünleri fiziksel olarak ele alabilir, yakından inceleyebilir ve satın almadan önce uygunluğunu değerlendirebilir. Görüntü büyütücüler, kullanıcılara sanal olarak benzer düzeyde inceleme ve inceleme sunarak bu deneyimi yeniden yaratmaya çalışır.

Şu durumlarda görüntü büyüteçleri de işinize yarayabilir: bir fotoğraf galerisi uygulaması oluşturma çünkü görüntünün belirli bir bölümünü yakınlaştırmak önemli bir özelliktir.

Görüntü Büyüteci Oluşturma

Bu projede kullanılan kod bir GitHub deposu ve MIT lisansı altında ücretsiz olarak kullanabilirsiniz.

Bir klasör oluşturun ve bu klasöre bir index.html dosya, stil.css dosya ve ana.js dosya. Bu standart kodu index.html'ye ekleyin:

html>
<htmldil="tr">
<KAFA>
<metakarakter kümesi="UTF-8" />
<metaisim="görüntü alanı"içerik="genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0" />
<başlık>Görüntü Büyüteçbaşlık>
<bağlantırel="stil sayfası"href="stil.css" />
KAFA>


<vücut>
vücut>
html>

İçinde vücut etiketi, sınıf adı "header" olan bir div öğesi oluşturun. Sonra "başlık" div'ine bir ekleyin h1 görüntü büyütücünüzün başlığını görüntülemek için başlık öğesi.

Metni ihtiyaçlarınıza göre özelleştirebilirsiniz. Ardından, büyüteci kullanma talimatlarını sağlayan ve kullanıcıya geçerli yakınlaştırma düzeyini gösteren iki yayılma öğesi ekleyin.

Başlık bölümünden sonra, bir div sınıf adı "container" olan öğe. Bu div içine, "magnifier" sınıf adına sahip başka bir div öğesi ekleyin ve onu görünümden gizlemek için "hidden" sınıfını uygulayın.

Bu öğe büyüteç görüntüsünü temsil edecektir. Ardından, "src" özniteliği "/main.js" olarak ayarlanmış bir betik etiketi ekleyin.

<vücut>
<divsınıf="başlık">
<h1>Görüntü Büyüteçh1>
<açıklık>Basmak <güçlü>Yukarı okgüçlü> veya <güçlü>Aşağı okgüçlü> ile
 yakınlaştırma düzeyini artırın veya azaltın.açıklık>


<açıklık>Yakınlaştırma seviyesi: <güçlüsınıf="Yakınlaştırma seviyesi">1güçlü>açıklık>
div>


<divsınıf="konteyner">
<divsınıf="büyüteç gizlendi">div>
div>
<senaryokaynak="/main.js">senaryo>
vücut>

İçindeki kodu değiştir stil.css aşağıdakilerle dosyalayın. Ayrıca bir Less gibi CSS ön işlemcisi eğer istersen:

:kök {
--büyüteç genişliği: 150;
--büyüteç yüksekliği: 150;
}
vücut {
görüntülemek: esnek;
esnek yön: kolon;
hizalama öğeleri: merkez;
}


.konteyner {
Genişlik: 400piksel;
yükseklik: 300piksel;
arka plan boyutu: kapak;
arka plan görüntüsü: url("https://cdn.pixabay.com/Fotoğraf/2019/03/27/15/24/hayvan-4085255_1280.jpg");
arka plan tekrarı: tekrarsız;
konum: akraba;
imleç: hiçbiri;
}


.büyüteç {
sınır yarıçapı: 400piksel;
kutu gölgesi: 0piksel 11piksel 8piksel 0piksel#0000008a;
konum: mutlak;
Genişlik: kalk(var(--büyüteç genişliği) * 1piksel);
yükseklik: kalk(var(--büyüteç yüksekliği) * 1piksel);
imleç: hiçbiri;
arka plan görüntüsü: url("https://cdn.pixabay.com/Fotoğraf/2019/03/27/15/24/hayvan-4085255_1280.jpg");
arka plan tekrarı: tekrarsız;
}


açıklık {
görüntülemek: engellemek;
}


.başlık {
görüntülemek: esnek;
esnek yön: kolon;
hizalama öğeleri: merkez;
}


.gizlenmiş {
görünürlük: gizlenmiş;
}
div > açıklık:nth-child (3) {
yazı Boyutu: 20piksel;
}

İçinde ana.js dosyasını kullanarak sınıf adları, "büyüteç" ve "kapsayıcı" içeren HTML öğelerini alın. Document.querySelector yöntemi ve bunları değişkenlere atayın büyüteç Ve konteyner, sırasıyla.

Ardından, kullanarak getComputedStyle fonksiyon almak Genişlik Ve yükseklik Büyüteç öğesinin ve ardından döndürülen dizelerden sayısal değerleri ayıklayın. alt dizi Ve indeksi yöntemler.

Ayıklanan genişliği değişkene atayın büyüteçGenişlikve çıkarılan yükseklik büyüteçYükseklik.

izin vermek büyüteç = belge.querySelector(".büyüteç");
izin vermek konteyner = belge.querySelector(".konteyner");
izin vermek magnifierWidth = getComputedStyle (büyüteç).width.substring(
0,
 getComputedStyle (büyüteç).width.indexOf("P")
);
izin vermek magnifierHeight = getComputedStyle (büyüteç).width.substring(
0,
 getComputedStyle (büyüteç).height.indexOf("P")
);

Ardından, yakınlaştırma düzeyi, maksimum yakınlaştırma düzeyi ve imleç ve büyütücü görüntünün konumları için değişkenleri ayarlayın.

izin vermek yakınlaştırmaDüzeyEtiketi = belge.querySelector(".Yakınlaştırma seviyesi");
izin vermek yakınlaştırma = 2;
izin vermek maksimum Yakınlaştırma Düzeyi = 5;
izin vermek işaretçiX;
izin vermek işaretçiY;
izin vermek büyütmekX;
izin vermek büyütmekY;

Yukarıdaki kod bloğunda, işaretçiX Ve işaretçiY her ikisi de imlecin X ve Y eksenleri boyunca konumunu temsil eder.

Şimdi iki yardımcı fonksiyon tanımlayın: getZoomLevel geçerli yakınlaştırma seviyesini döndürür ve GetPointerPosition olan bir nesneyi döndürür X Ve y imlecin koordinatları.

işlevgetZoomLevel() {
geri dönmek yakınlaştırma;
}
işlevGetPointerPosition() {
geri dönmek { X: işaretçiX, y: işaretçiY }
}

Ardından, oluştur ve ekle güncellemeMagImage geçerli imleç konumuyla yeni bir MouseEvent nesnesi oluşturan ve onu kapsayıcı öğeye gönderen işlev. Bu işlev, büyüteç görüntüsünün güncellenmesinden sorumludur.

işlevgüncellemeMagImage() {
izin vermek ev = yeni Fare Etkinliği("fare hareketi", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 kabarcıklar: doğru,
 iptal edilebilir: doğru,
 görüş: pencere,
 });
 container.dispatchEvent (evt);
}

Şimdi, eklemelisiniz olay dinleyicisi kullanıcı "ArrowUp" veya "ArrowDown" tuşlarına bastığında yakınlaştırma seviyesini ayarlayan "keyup" olayı için pencere nesnesine.

"keyup" olayındaki geri arama işlevi, yakınlaştırma seviyesi etiketinin güncellenmesinden ve tetiklenmesinden de sorumludur. güncellemeMagImage işlev.

pencere.addEventListener("anahtarlama", (e) => {
eğer (e.anahtar "Yukarı ok" && maxZoomLevel - Sayı(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 yakınlaştır = yakınlaştır + 0.3;
 updateMagImage();
 }
eğer (e.anahtar "Aşağı ok" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 yakınlaştır = yakınlaştır - 0.3;
 updateMagImage();
 }
});

Ardından, "mousemove" olayı için kapsayıcı öğeye bir olay dinleyicisi ekleyin.

​​​​​​

Geri arama işlevinde, "gizli" sınıfı büyüteç öğesinden kaldıran işlevselliği ekleyin. görünür hale getirir ve kapsayıcıya göre fare konumunu hesaplar, sayfa kaydırmayı hesap.

Bu fonksiyon aynı zamanda büyütecin dönüştürme stilini hesaplanan konuma ayarlamalı ve yakınlaştırma düzeyine ve fareye bağlı olarak büyütücü görüntünün arka plan boyutunu ve konumunu belirleyin konum.

container.addEventListener("fare hareketi", (e) => {
 büyüteç.sınıfList.kaldır("gizlenmiş");
izin vermek rect = container.getBoundingClientRect();
izin vermek x = e.pageX - rect.left;
izin vermek y = e.pageY - rect.top;
 x = x - pencere.kaydırmaX;
 y = y - pencere.kaydırmaY;


 büyüteç.style.transform = çevir(${x}piksel, ${y}piksel)`;
sabit görüntü Genişliği = 400;
sabit resim Yüksekliği = 300;


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


 büyütmeX = x * getZoomLevel() + 15;
 büyütmeY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "piksel" + -büyütY + "piksel";
});

Ardından kapsayıcı öğeye başka bir olay dinleyicisi ekleyin, ancak bu sefer olay dinleyicisi "mouseout" olayı ve "gizli" sınıfı, fare kabın dışındayken büyüteç öğesine geri ekleyin alan.

container.addEventListener("fare", () => {
 büyüteç.sınıfList.add("gizlenmiş");
});

Son olarak, imlecin x ve y konumlarını güncelleyen "mousemove" olayı için pencere nesnesine bir olay dinleyicisi ekleyin.

pencere.addEventListener("fare hareketi", (e) => {
 işaretçiX = e.clientX;
 işaretçiY = e.clientY;
});

Bu kadar! Vanilya JavaScript ile bir resim büyütücü oluşturmayı başardınız.

Görüntü Büyüteçleri Kullanıcı Deneyimini Nasıl İyileştirir?

Büyüteç, kullanıcıların bir görüntünün belirli alanlarını yakınlaştırmasına olanak tanıyarak, ürün ayrıntılarını daha net bir şekilde incelemelerine olanak tanır.

Bu gelişmiş görsel keşif düzeyi, bilinçli kararlar verebildikleri için kullanıcılara güven aşılar. Bu, dönüşüm oranlarının artmasına ve müşteriyi elde tutmanın iyileştirilmesine katkıda bulunabilir.