Ngorei NexaUI

<div class="nx-lightbox">
  <div class="nx-lightbox-item">
    <img src="/path/to/image1.jpg" alt="Gambar 1" data-nx-lightbox="gallery">
  </div>
  <div class="nx-lightbox-item">
    <img src="/path/to/image2.jpg" alt="Gambar 2" data-nx-lightbox="gallery">
  </div>
  <div class="nx-lightbox-item">
    <img src="/path/to/image3.jpg" alt="Gambar 3" data-nx-lightbox="gallery">
  </div>
</div>

<!-- Galeri 1 -->
<div class="nx-lightbox">
  <div class="nx-lightbox-item">
    <img src="/path/to/image1.jpg" alt="Galeri 1 - Gambar 1" data-nx-lightbox="gallery1">
  </div>
  <div class="nx-lightbox-item">
    <img src="/path/to/image2.jpg" alt="Galeri 1 - Gambar 2" data-nx-lightbox="gallery1">
  </div>
</div>

<!-- Galeri 2 -->
<div class="nx-lightbox">
  <div class="nx-lightbox-item">
    <img src="/path/to/image3.jpg" alt="Galeri 2 - Gambar 1" data-nx-lightbox="gallery2">
  </div>
  <div class="nx-lightbox-item">
    <img src="/path/to/image4.jpg" alt="Galeri 2 - Gambar 2" data-nx-lightbox="gallery2">
  </div>
</div>

<div class="nx-lightbox-item">
  <img src="/path/to/image.jpg" 
       alt="Gambar dengan caption" 
       data-nx-lightbox="gallery-caption"
       data-nx-caption="Ini adalah keterangan gambar yang informatif">
</div>

<div class="nx-lightbox-masonry">
  <div class="nx-lightbox-item">
    <img src="https://picsum.photos/id/231/400/300" alt="Masonry 1" data-nx-lightbox="masonry">
  </div>
  <div class="nx-lightbox-item">
    <img src="https://picsum.photos/id/232/400/500" alt="Masonry 2" data-nx-lightbox="masonry">
  </div>
  <div class="nx-lightbox-item">
    <img src="https://picsum.photos/id/233/400/400" alt="Masonry 3" data-nx-lightbox="masonry">
  </div>
  <div class="nx-lightbox-item">
    <img src="https://picsum.photos/id/234/400/600" alt="Masonry 4" data-nx-lightbox="masonry">
  </div>
</div>

<div class="nx-lightbox">
  <div class="nx-lightbox-item nx-hover-info">
    <img src="https://picsum.photos/id/235/400/300" alt="Hover 1" data-nx-lightbox="hover">
    <div class="nx-lightbox-info">
      <h6>Judul Gambar</h6>
      <p>Deskripsi singkat gambar</p>
      <span class="material-icons">zoom_in</span>
    </div>
  </div>
  <div class="nx-lightbox-item nx-hover-info">
    <img src="https://picsum.photos/id/236/400/300" alt="Hover 2" data-nx-lightbox="hover">
    <div class="nx-lightbox-info">
      <h6>Judul Gambar</h6>
      <p>Deskripsi singkat gambar</p>
      <span class="material-icons">zoom_in</span>
    </div>
  </div>
</div>

<div class="nx-lightbox-strip">
  <div class="nx-lightbox-main">
    <img src="https://picsum.photos/id/100/800/500" alt="Main Image" data-nx-lightbox="strip">
  </div>
  <div class="nx-lightbox-thumbs">
    <img src="https://picsum.photos/id/100/100/100" alt="Thumb 1" data-nx-lightbox="strip" class="active">
    <img src="https://picsum.photos/id/101/100/100" alt="Thumb 2" data-nx-lightbox="strip">
    <img src="https://picsum.photos/id/102/100/100" alt="Thumb 3" data-nx-lightbox="strip">
    <img src="https://picsum.photos/id/103/100/100" alt="Thumb 4" data-nx-lightbox="strip">
    <img src="https://picsum.photos/id/104/100/100" alt="Thumb 5" data-nx-lightbox="strip">
  </div>
</div>

/* Contoh kustomisasi lightbox */
.nx-lightbox-overlay {
  background: rgba(0, 0, 0, 0.95);
}

.nx-lightbox-content {
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.nx-lightbox-nav {
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

const lightbox = new NexaLightbox();

// Event saat lightbox dibuka
lightbox.on('open', (image) => {
  console.log('Lightbox dibuka', image);
});

// Event saat lightbox ditutup
lightbox.on('close', () => {
  console.log('Lightbox ditutup');
});

// Event saat navigasi
lightbox.on('navigate', (direction, image) => {
  console.log(`Navigasi ke $`, image);
});