Dalam dunia pengembangan web saat ini, menciptakan antarmuka yang elegan dan ramah pengguna merupakan prioritas utama. Salah satu cara untuk meningkatkan pengalaman pengguna di situs web Anda secara signifikan adalah dengan menerapkan fitur gambar lightbox. Lightbox memungkinkan Anda menampilkan gambar dalam overlay bebas gangguan, menjadikannya pilihan favorit untuk menampilkan galeri atau gambar besar. Dalam tutorial ini, kami akan memandu Anda melalui proses pembuatan gambar lightbox kustom menggunakan JavaScript standar, yang memungkinkan Anda mengintegrasikannya dengan mulus ke dalam halaman web Anda sendiri.
Gaya
Tambahkan CSS berikut:
/*! Image Lightbox CSS
* Copyright: Deo Kumar - Fineshop Design
* License: MIT
*/
.lbImg{position:relative}
.lbImg::before{content:'';position:absolute;top:10px;right:5px;width:30px;height:30px;display:flex;margin:0 5px;background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23363637' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/></svg>") center / 14px no-repeat;background-color:rgba(0,0,0,.2);border-radius:50%;z-index:2;opacity:0;transition:all 0.2s ease;cursor:pointer}
.lbImg:hover::before{opacity:1}
.lbImg img {cursor:zoom-in;}
.zmImg{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;z-index:999;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px);opacity:0;visibility:hidden;transition:all 0.4s ease;}
.zmImg.active{opacity:1;visibility:visible}
.zmImg a, .zmImg a:hover{opacity:1}
.zmImg img{display:block;max-width:92%;max-height:92%;width:auto;margin:auto;border-radius:10px;box-shadow:0 5px 30px 0 rgba(0,0,0,.05);transform:scale(0.4);transition:all 0.4s ease;transition-property:transform;}
.zmImg.active img {transform:scale(1);cursor:zoom-out;}
.zmImg img.full{left:auto;right:auto;border-radius:10px;width:auto}
.zmImg::after{content:'\2715';line-height:16px;font-size:14px;color:#fffdfc;background:#482dff;position:fixed;bottom:-20px;right:-20px; display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%;opacity:0;visibility:hidden;transition:all 0.4s ease;}
.zmImg.active::after{bottom:20px;right:20px;opacity:1;visibility:visible;cursor:pointer}Untuk memastikan lightbox Anda sesuai dengan desain situs web Anda, pastikan untuk menambahkan gaya CSS khusus. Anda dapat menata wadah lightbox, tombol tutup, dan elemen lainnya sesuai kebutuhan untuk menciptakan pengalaman visual yang kohesif dan menyenangkan.
JavaScript Magic
Sekarang, mari kita pelajari kode JavaScript agar fungsi lightbox Anda berfungsi dengan lancar. Tambahkan kode JavaScript berikut ke skrip yang sudah ada atau buat berkas JavaScript baru:
/*! Image Lightbox Script
* Copyright: Deo Kumar - Fineshop Design
* License: MIT
*/
(function (options) {
function getType (e) {
return Object.prototype.toString.call(e).replace(/(?:^\[object\s(.*?)\]$)/,"$1").toLowerCase();
}
const images = Array.prototype.filter.call(
getType(options.selectors) === "string" ?
document.querySelectorAll(options.selectors) :
(getType(options.selectors) === "array" ?
document.querySelectorAll(options.selectors.join(",")) :
[]),
function (image) {
return image.tagName === "IMG" && (getType(options.ignoreClass) === "string" && options.ignoreClass ? !image.classList.contains(options.ignoreClass) : true);
}
);
if (images.length === 0) {
return;
}
const lightBox = document.createElement("div");
lightBox.className = options.classes.lightboxWrapper;
lightBox.addEventListener("click", function (event) {
lightBox.classList.remove("active");
});
lightBox.addEventListener("transitionend", function (event) {
if (event.propertyName === "opacity" && getComputedStyle(lightBox).getPropertyValue("opacity") === "0" && !lightBox.classList.contains("active")) {
lightBox.parentNode.removeChild(lightBox);
}
});
images.forEach(function (image) {
const imageContainer = document.createElement("div");
imageContainer.className = options.classes.imageWrapper;
image.parentNode.insertBefore(imageContainer, image);
imageContainer.appendChild(image);
imageContainer.addEventListener("click", function (event) {
event.preventDefault();
lightBox.innerHTML = image.outerHTML;
document.body.appendChild(lightBox);
setTimeout(function () {
lightBox.classList.add("active");
}, 40);
});
});
}).call(this, {
selectors: "#postBody img",
ignoreClass: "noLb",
classes: {
imageWrapper: "lbImg",
lightboxWrapper: "zmImg"
}
});Kode ini akan mendengarkan klik pada gambar galeri Anda dan menampilkan gambar yang dipilih di lightbox. Kode ini juga memungkinkan pengguna untuk menutup lightbox dengan mengklik tombol tutup.
Kesimpulan
Dengan membuat gambar lightbox kustom menggunakan JavaScript vanilla, Anda mendapatkan kendali penuh atas fungsionalitas dan tampilannya. Hal ini memungkinkan Anda untuk mengintegrasikannya dengan mulus ke dalam desain situs web Anda, memberikan pengalaman menonton gambar yang menyenangkan bagi pengguna. Ingatlah untuk menyesuaikan gaya dan fungsionalitasnya agar sesuai dengan kebutuhan unik proyek Anda, dan nikmati peningkatan pengalaman pengguna situs web Anda dengan fitur serbaguna ini. Selamat ber-coding!
Copyright (c):
fineshopdesign.com
