Mini Project: Gallery Image Viewer dengan JavaScript

Gallery Image Viewer dengan JavaScript adalah fitur yang memungkinkan pengguna melihat gambar dalam ukuran besar ketika diklik dari daftar thumbnail. Biasanya digunakan pada website portofolio, toko online, atau galeri foto pribadi.

Dengan JavaScript, kita bisa membuat efek seperti:

Klik gambar kecil → muncul versi besar,
Navigasi ke gambar berikut atau sebelumnya,
Efek overlay (popup) yang menutupi layar belakang.

Proyek ini melatih kemampuan manipulasi DOM, event handling, dan penggunaan class CSS dinamis.

Struktur Dasar HTML

Buat file index.html berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gallery Image Viewer</title>
  <style>
    body { font-family: Arial; margin: 40px; text-align: center; background: #f7f7f7; }
    h1 { margin-bottom: 20px; }
    .gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .gallery img { width: 150px; height: 100px; object-fit: cover; cursor: pointer; border-radius: 5px; transition: 0.3s; }
    .gallery img:hover { transform: scale(1.05); }

    /* Popup viewer */
    .viewer {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.8);
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .viewer img { width: 80%; max-width: 600px; border-radius: 10px; }
    .controls { margin-top: 10px; display: flex; gap: 20px; }
    button { padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; }
    .close { background: #f44336; color: white; }
    .nav { background: #2196f3; color: white; }
  </style>
</head>
<body>

  <h1>️ Gallery Image Viewer</h1>

  <div class="gallery" id="gallery">
    <img src="https://picsum.photos/id/1011/400/300" alt="Gambar 1">
    <img src="https://picsum.photos/id/1025/400/300" alt="Gambar 2">
    <img src="https://picsum.photos/id/1035/400/300" alt="Gambar 3">
    <img src="https://picsum.photos/id/1042/400/300" alt="Gambar 4">
    <img src="https://picsum.photos/id/1050/400/300" alt="Gambar 5">
  </div>

  <div class="viewer" id="viewer">
    <img id="viewerImg" src="" alt="Gambar Besar">
    <div class="controls">
      <button class="nav" id="prevBtn">⬅ Sebelumnya</button>
      <button class="close" id="closeBtn">Tutup</button>
      <button class="nav" id="nextBtn">Berikutnya ➡</button>
    </div>
  </div>

  <script src="app.js"></script>
</body>
</html>

Logika JavaScript

Buat file app.js:

const gallery = document.getElementById("gallery");
const viewer = document.getElementById("viewer");
const viewerImg = document.getElementById("viewerImg");
const closeBtn = document.getElementById("closeBtn");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");

const images = document.querySelectorAll("#gallery img");
let currentIndex = 0;

// Fungsi untuk menampilkan gambar besar
function showImage(index) {
  viewerImg.src = images[index].src;
  viewer.style.display = "flex";
  currentIndex = index;
}

// Event klik gambar
images.forEach((img, index) => {
  img.addEventListener("click", () => showImage(index));
});

// Tombol navigasi
nextBtn.addEventListener("click", () => {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
});

prevBtn.addEventListener("click", () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
});

// Tombol tutup
closeBtn.addEventListener("click", () => {
  viewer.style.display = "none";
});

Penjelasan

Klik gambar kecil → tampilkan versi besar di dalam elemen .viewer.
Tombol “Berikutnya” dan “Sebelumnya” memungkinkan pengguna melihat gambar lain.
Tombol “Tutup” menyembunyikan tampilan overlay.
Semua gambar dikelola dalam array images agar mudah dinavigasi.

Menambahkan Navigasi Keyboard (Opsional)

Agar lebih keren, tambahkan dukungan tombol panah dan ESC:

document.addEventListener("keydown", (e) => {
  if (viewer.style.display === "flex") {
    if (e.key === "ArrowRight") nextBtn.click();
    if (e.key === "ArrowLeft") prevBtn.click();
    if (e.key === "Escape") closeBtn.click();
  }
});

Studi Kasus Interaktif

Klik salah satu gambar → muncul tampilan besar.
Gunakan tombol ➡ / ⬅ untuk berganti gambar.
Klik Tutup atau tekan ESC → popup hilang.

Semua berjalan langsung tanpa library tambahan!

Kesimpulan

Mini project Gallery Image Viewer JavaScript ini mengajarkan:

Penggunaan event listener untuk klik dan keyboard,
Manipulasi elemen DOM dinamis,
Penerapan CSS overlay dan popup,
Logika navigasi gambar interaktif.

Kamu bisa mengembangkannya menjadi galeri profesional dengan:

Efek transisi (fade/slide),
Caption foto,
Tombol like atau download.