htmlcssjavascriptgalerikomponenMenengah10 mnt baca

Galeri dengan Lightbox

Klik foto untuk melihat versi besar mengambang dengan navigasi antar foto.

Apa Itu Lightbox?

Lightbox adalah "ruang gelap" untuk melihat foto: klik thumbnail, layar meredup, foto tampil besar di tengah. Kamu bisa pindah ke foto berikutnya tanpa menutup. Ini standar di portofolio fotografer dan galeri produk.

Langkah Membangun

HTML: Grid thumbnail seperti modul galeri, plus satu lightbox: <div class="lightbox"> berisi tombol tutup, tombol prev/next, <img> besar, dan caption.

CSS: Lightbox memakai position: fixed; inset: 0 dengan background hitam 90 persen, disembunyikan default. Gambar besar dibatasi max-width: 90vw; max-height: 80vh agar muat di semua layar. Tombol navigasi di kiri-kanan gambar.

JS: Ini gabungan pola modal + carousel:

  1. Klik thumbnail ke-i: simpan indeks, isi src gambar besar, tampilkan lightbox.
  2. Prev/next: ubah indeks dengan modulo (loop).
  3. Tutup: tombol ×, klik area gelap, atau Escape.
  4. Bonus: navigasi keyboard dengan panah kiri/kanan.

Kesalahan Umum

  • Gambar besar loading lambat (pakai versi gambar lebih besar tapi tetap wajar, misal 1200px).
  • Scroll body ikut jalan di belakang lightbox (kunci dengan overflow hidden seperti modal).
  • Indeks tidak sinkron antara thumbnail dan lightbox (simpan satu variabel indeks sebagai sumber kebenaran).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Preload Gambar

Agar pindah foto terasa instan, preload gambar berikutnya dan sebelumnya setiap kali lightbox menampilkan foto. Pakai objek Image() JavaScript.