Cara Membuat Pembesar Gambar Dengan JavaScript Vanilla

Jika Anda pernah menjelajahi situs web belanja, Anda mungkin menemukan fitur pembesar gambar. Ini memungkinkan Anda memperbesar bagian tertentu dari suatu gambar untuk melihat lebih dekat. Memasukkan fitur kecil namun berdampak ini dapat sangat meningkatkan pengalaman pengguna di situs web Anda sendiri.

Membangun pembesar gambar dengan cara yang mulus dan kohesif bisa menjadi sebuah tantangan. Tetapi melalui langkah-langkah ini akan membantu Anda membuat kaca pembesar gambar Anda sendiri dari awal, tanpa perlu bergantung pada plugin pihak ketiga.

Kapan Menggunakan Pembesar Gambar di Proyek Web Anda

Pembesar gambar dapat berguna saat Anda membangun proyek dengan banyak gambar. Seperti disebutkan sebelumnya, pembesar gambar sangat populer di situs web belanja karena terkadang pengguna mungkin perlu melihat produk lebih dekat sebelum memutuskan apakah produk tersebut layak dibeli.

Pelanggan hanya mengandalkan informasi dan visual yang disediakan oleh situs web untuk menilai kualitas, fitur, dan tampilan suatu produk. Namun, gambar statis saja mungkin tidak selalu memberikan kejelasan yang cukup atau memungkinkan evaluasi item secara menyeluruh.

Di toko tradisional, pelanggan dapat menangani produk secara fisik, memeriksanya dari dekat, dan mengevaluasi kesesuaiannya sebelum membeli. Pembesar gambar berupaya untuk menciptakan kembali pengalaman ini dengan menawarkan kepada pengguna tingkat pengawasan dan pemeriksaan yang serupa secara virtual.

Pembesar gambar juga bisa berguna jika Anda membangun aplikasi galeri foto karena memperbesar ke bagian tertentu dari gambar adalah fitur penting.

Membangun Pembesar Gambar

Kode yang digunakan dalam proyek ini tersedia di a repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT.

Buat folder dan, di folder itu, tambahkan file index.html mengajukan, style.css berkas dan main.js mengajukan. Tambahkan kode boilerplate ini ke index.html:

html>
<htmllang="en">
<kepala>
<metacharset="UTF-8" />
<metanama="area pandang"isi="width=device-width, initial-scale=1.0" />
<judul>Pembesar Gambarjudul>
<tautanrel="lembar gaya"href="style.css" />
kepala>
<tubuh>
tubuh>
html>

Di dalam tubuh tag, buat elemen div dengan nama kelas "header". Kemudian di div "header", tambahkan an h1 elemen heading untuk menampilkan judul kaca pembesar gambar Anda.

Anda dapat menyesuaikan teks agar sesuai dengan kebutuhan Anda. Selanjutnya, sertakan dua elemen span yang memberikan instruksi untuk menggunakan kaca pembesar dan menampilkan tingkat zoom saat ini kepada pengguna.

Setelah bagian header, buat a div elemen dengan nama kelas "kontainer". Di dalam div ini, tambahkan elemen div lain dengan nama class "magnifier" dan terapkan class "hidden" untuk menyembunyikannya dari tampilan.

Elemen ini akan mewakili gambar kaca pembesar. Kemudian, tambahkan tag skrip dengan atribut "src" yang disetel ke "/main.js".

<tubuh>
<divkelas="tajuk">
<h1>Pembesar Gambarh1>
<menjangkau>Tekan <kuat>Panah Ataskuat> atau <kuat>Panah Bawahkuat> ke
 menambah atau mengurangi tingkat zoom.menjangkau>
<menjangkau>Tingkat Perbesaran: <kuatkelas="tingkat zoom">1kuat>menjangkau>
div>
<divkelas="wadah">
<divkelas="kaca pembesar tersembunyi">div>
div>
<naskahsrc="/main.js">naskah>
tubuh>

Ganti kode di style.css file dengan berikut ini. Anda juga dapat menggunakan Preprosesor CSS seperti Less jika kamu mau:

:akar {
--lebar-pembesar: 150;
--magnifier-height: 150;
}
tubuh {
menampilkan: melenturkan;
flex-direction: kolom;
menyelaraskan-item: tengah;
}
.wadah {
lebar: 400px;
tinggi: 300px;
background-size: menutupi;
gambar latar belakang: url("https://cdn.pixabay.com/foto/2019/03/27/15/24/hewan-4085255_1280.jpg");
background-repeat: no-repeat;
posisi: relatif;
kursor: tidak ada;
}
.kaca pembesar {
radius perbatasan: 400px;
bayangan kotak: 0px 11px 8px 0px#0000008a;
posisi: mutlak;
lebar: perhitungan(var(--lebar-pembesar) * 1px);
tinggi: perhitungan(var(--magnifier-height) * 1px);
kursor: tidak ada;
gambar latar belakang: url("https://cdn.pixabay.com/foto/2019/03/27/15/24/hewan-4085255_1280.jpg");
background-repeat: no-repeat;
}
menjangkau {
menampilkan: memblokir;
}
.header {
menampilkan: melenturkan;
flex-direction: kolom;
menyelaraskan-item: tengah;
}
.tersembunyi {
visibilitas: tersembunyi;
}
div > menjangkau:anak ke-n (3) {
ukuran huruf: 20px;
}

Dalam main.js file, ambil elemen HTML dengan nama kelas, "magnifier" dan "container" menggunakan document.querySelector metode dan menetapkan mereka ke variabel kaca pembesar Dan wadah, masing-masing.

Kemudian, menggunakan getComputedStyle fungsi mengambil lebar Dan tinggi dari elemen pembesar dan kemudian ekstrak nilai numerik dari string yang dikembalikan menggunakan substring Dan Indeks metode.

Tetapkan lebar yang diekstraksi ke variabel pembesarLebar, dan tinggi yang diekstrak ke kaca pembesarTinggi.

membiarkan kaca pembesar = dokumen.querySelector(".kaca pembesar");
membiarkan wadah = dokumen.querySelector(".wadah");
membiarkan magnifierWidth = getComputedStyle (kaca pembesar).width.substring(
0,
 getComputedStyle (pembesar).width.indexOf("P")
);
membiarkan magnifierHeight = getComputedStyle (kaca pembesar).width.substring(
0,
 getComputedStyle (kaca pembesar).height.indexOf("P")
);

Selanjutnya, atur variabel untuk tingkat pembesaran, tingkat pembesaran maksimum, dan posisi kursor dan gambar kaca pembesar.

membiarkan zoomLevelLabel = dokumen.querySelector(".tingkat zoom");
membiarkan perbesar = 2;
membiarkan maxZoomLevel = 5;
membiarkan pointerX;
membiarkan pointerY;
membiarkan memperbesarX;
membiarkan memperbesarY;

Pada blok kode di atas, pointerX Dan pointerY keduanya mewakili posisi kursor di sepanjang sumbu X dan Y.

Sekarang, tentukan dua fungsi pembantu: getZoomLevel yang mengembalikan tingkat zoom saat ini, dan getPointerPosition yang mengembalikan objek dengan X Dan y koordinat kursor.

fungsigetZoomLevel() {
kembali Perbesar;
}
fungsigetPointerPosition() {
kembali { X: penunjukX, y: penunjukY }
}

Selanjutnya, buat add an updateMagImage fungsi yang membuat objek MouseEvent baru dengan posisi kursor saat ini dan mengirimkannya ke elemen penampung. Fungsi ini bertanggung jawab untuk memperbarui gambar kaca pembesar.

fungsiupdateMagImage() {
membiarkan evt = baru MouseEvent("gerakan tikus", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 gelembung: BENAR,
 dapat dibatalkan: BENAR,
 melihat: jendela,
 });
 container.dispatchEvent (evt);
}

Sekarang, Anda harus menambahkan pendengar acara ke objek jendela untuk peristiwa "keyup" yang menyesuaikan tingkat zoom saat pengguna menekan tombol "ArrowUp" atau "ArrowDown".

Fungsi callback pada event "keyup" juga bertanggung jawab untuk mengupdate label level zoom dan memicu updateMagImage fungsi.

jendela.addEventListener("keyup", (e) => {
jika (e.key "Panah Atas" &&TingkatZoommaks - Nomor(zoomLevelLabel.teksKonten) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 perbesar = perbesar + 0.3;
 updateMagImage();
 }
jika (e.key "Panah Bawah" && !(zoomLevelLabel.teksKonten <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 perbesar = perbesar - 0.3;
 updateMagImage();
 }
});

Kemudian tambahkan event listener ke elemen container untuk event "mousemove".

​​​​​​

Dalam fungsi panggilan balik, tambahkan fungsionalitas yang menghapus kelas "tersembunyi" dari elemen kaca pembesar ke membuatnya terlihat dan menghitung posisi mouse relatif terhadap wadah, mengambil halaman bergulir ke dalam akun.

Fungsi ini juga harus mengatur gaya transformasi kaca pembesar ke posisi yang dihitung, dan menentukan ukuran latar belakang dan posisi gambar kaca pembesar berdasarkan tingkat zoom dan mouse posisi.

container.addEventListener("gerakan tikus", (e) => {
 kaca pembesar.classList.hapus("tersembunyi");
membiarkan rect = container.getBoundingClientRect();
membiarkan x = e.halamanX - persegi.kiri;
membiarkan y = e.halamanY - rect.top;
 x = x - jendela.scrollX;
 y = y - jendela.scrollY;
 kaca pembesar.style.transform = `terjemahkan(${x}px, ${y}px)`;
const imgLebar = 400;
const imgTinggi = 300;
 kaca pembesar.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";
 magnifyX = x * getZoomLevel() + 15;
 perbesarY = y * getZoomLevel() + 15;
 kaca pembesar.style.backgroundPosition = -magnifyX + "px" + -memperbesarY + "px";
});

Kemudian tambahkan pendengar acara lain ke elemen penampung, tetapi kali ini pendengar acara harus mendengarkannya acara "mouseout" dan tambahkan kelas "tersembunyi" kembali ke elemen pembesar setiap kali mouse keluar dari wadah daerah.

container.addEventListener("mouseout", () => {
 kaca pembesar.classList.add("tersembunyi");
});

Terakhir, tambahkan pendengar acara ke objek jendela untuk acara "mousemove" yang memperbarui posisi x dan y kursor.

jendela.addEventListener("gerakan tikus", (e) => {
 pointerX = e.clientX;
 pointerY = e.clientY;
});

Itu dia! Anda telah berhasil membuat kaca pembesar gambar dengan vanilla JavaScript.

Bagaimana Pembesar Gambar Meningkatkan Pengalaman Pengguna

Dengan memungkinkan pengguna memperbesar area gambar tertentu, kaca pembesar memungkinkan mereka memeriksa detail produk dengan lebih jelas.

Tingkat eksplorasi visual yang ditingkatkan ini menanamkan kepercayaan pada pengguna karena mereka dapat membuat keputusan yang tepat. Ini dapat berkontribusi pada peningkatan tingkat konversi dan peningkatan retensi pelanggan.