Di dunia web development sekarang, bikin interface yang elegan dan user-friendly itu jadi prioritas utama. Salah satu cara ampuh buat ningkatin user experience di website kamu adalah dengan implementasi fitur lightbox image. Lightbox memungkinkan kamu buat nampilin gambar dalam overlay yang bebas gangguan, makanya jadi pilihan favorit buat showcase gallery atau gambar-gambar berukuran besar. Di tutorial kali ini, kita bakal ngebantu kamu bikin custom lightbox image pakai vanilla JavaScript, jadi kamu bisa integrasiin dengan mulus ke halaman web kamu sendiri.
Styling yang Kece
Pertama-tama, tambahin CSS berikut ini:
/*! Image Lightbox CSS
* Copyright: Han Haoyu - Platform
* License: MIT
*/
.LightboxImagebyHHC{position:relative}
.LightboxImagebyHHC::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}
.LightboxImagebyHHC:hover::before{opacity:1}
.LightboxImagebyHHC img {cursor:zoom-in;}
.LBimgByHHC{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;}
.LBimgByHHC.active{opacity:1;visibility:visible}
.LBimgByHHC a, .LBimgByHHC a:hover{opacity:1}
.LBimgByHHC 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;}
.LBimgByHHC.active img {transform:scale(1);cursor:zoom-out;}
.LBimgByHHC img.full{left:auto;right:auto;border-radius:10px;width:auto}
.LBimgByHHC::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;}
.LBimgByHHC.active::after{bottom:20px;right:20px;opacity:1;visibility:visible;cursor:pointer}Buat mastiin lightbox kamu cocok sama desain website, jangan lupa sesuaikan style CSS-nya. Kamu bisa atur style container lightbox, tombol close, dan elemen-elemen lainnya sesuai kebutuhan supaya tampilannya cohesive dan enak dilihat. Semuanya bisa kamu custom sesuka hati buat bikin pengalaman visual yang lebih ciamik.
Keajaiban JavaScript
Nah sekarang, mari kita selami kode JavaScript-nya buat bikin fungsionalitas lightbox kamu jalan dengan smooth. Tambahin kode JavaScript berikut ke script yang udah ada atau bikin file JavaScript baru:
/*! Image Lightbox Script
* Copyright: Han Haoyu - Platform
* 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: "LightboxImagebyHHC",
lightboxWrapper: "LBimgByHHC"
}
});Kode ini bakal dengerin setiap klik di gambar gallery kamu terus nampilin gambar yang dipilih dalam mode lightbox. Selain itu, user juga bisa nutup lightbox dengan gampang tinggal klik tombol close atau area di luar gambar. Simple tapi powerful banget kan?
Kesimpulan
Dengan bikin custom lightbox image pakai vanilla JavaScript, kamu dapet kontrol penuh atas fungsionalitas dan tampilannya. Ini memungkinkan kamu buat integrasiin dengan mulus ke desain website, sekaligus kasih pengalaman image viewing yang menyenangkan buat pengunjung. Inget ya, jangan ragu buat sesuaikan style dan fungsionalitasnya supaya cocok sama kebutuhan project kamu. Selamat berkreasi dan semoga fitur versatile ini bisa bikin website kamu makin keren. Happy coding!
Copyright (c):
hanhaoyu.com
