NXDOM

Nxdom Framework

Nusantara eXtreme Development Object Model — dokumentasi resmi

NexaLightbox NX.Lightbox

Lightbox gambar penuh layar dengan zoom, unduh, dan kontrol keyboard. Kelas dari assets/modules/Lightbox/NexaLightbox.js; di bundel sebagai NX.Lightbox (alias NX.NexaLightbox).

Fitur singkat

  • Buka klik gambar pemicu; tutup tombol, klik area gelap, atau Escape
  • Spinner saat memuat; placeholder jika URL gagal
  • Zoom: +/−, reset, scroll roda di atas gambar; seret gambar saat zoom lebih dari 1
  • Tombol unduh (nama file dari URL atau id elemen)
  • Ikon kontrol memakai Font Awesome 6 (stylesheet di-inject sekali lewat #nexa-lightbox-styles)

HTML minimal

Gunakan <img> dengan src (atau data-src untuk sumber alternatif). Untuk initAll, id opsional — dibuat otomatis bila kosong.

<img id="preview-1" src="/path/ke/gambar.jpg" alt="Deskripsi" class="nexa-lightbox" style="max-width:300px; cursor:pointer;" />

Lazy URL (dipilih jika ada):

<img id="preview-2" data-src="/path/ke/gambar-besar.jpg" src="/path/ke/thumb.jpg" alt="Thumb" class="nexa-lightbox" />

Selector default initAll juga mencakup atribut data-lightbox:

<img data-lightbox src="/gambar.jpg" alt="Foto" />

Di aplikasi (NX)

Setelah gambar ada di DOM, panggil initAll sekali — misalnya di callback route:

const instances = NX.Lightbox.initAll('.nexa-lightbox'); console.log('Lightbox:', instances.length);

Selector kustom (default modul: 'img[data-lightbox], img.nexa-lightbox'):

NX.Lightbox.initAll('img.galeri-lightbox');

Inisialisasi manual per gambar (harus punya id unik):

const lb = new NX.Lightbox('#preview-1'); // lb.targetId — id pemicu (berguna untuk nama unduhan)

Modul ES langsung (tanpa NX)

<script type="module"> import { NexaLightbox } from '/assets/modules/Lightbox/NexaLightbox.js'; NexaLightbox.initAll('.nexa-lightbox'); // atau: new NexaLightbox('#myImg'); </script>

API instance

Anggota Keterangan
show() Buka lightbox (muat src atau data-src)
hide() Tutup dan reset zoom
zoomIn() / zoomOut() Zoom bertahap
resetZoom() Zoom 1, posisi tengah
downloadImage() Unduh (tergantung same-origin / CORS URL)
destroy() Hapus overlay, listener global, kembalikan scroll body

Properti internal yang sering dipakai: targetId, currentZoom, minZoom (0.5), maxZoom (3), zoomStep (0.2).

Cuplikan route (template)

Contoh pola seperti templates/lightbox.js:

export async function lightbox(page, route) { route.register(page, async (routeName, container, routeMeta, style, nav = {}) => { route.routeMetaByRoute.set(page, routeMeta); container.innerHTML = ` <h1>Judul halaman</h1> <img id="a" src="/drive/a.png" alt="A" class="nexa-lightbox" style="max-width:300px" /> <img id="b" src="/drive/b.png" alt="B" class="nexa-lightbox" style="max-width:300px" /> `; NX.Lightbox.initAll('.nexa-lightbox'); }); }

Perilaku initAll

  • Elemen yang sudah punya data-nexa-initialized dilewati (hindari double init).
  • Jika <img> tanpa id, modul menambahkan id acak nexa-lightbox-xxxxxxxxx.
  • Mengembalikan array instance NexaLightbox.

Font Awesome ganda

Modul menyisipkan @import Font Awesome ke #nexa-lightbox-styles. Jika halaman sudah memuat Font Awesome, stylesheet bisa terunduh dua kali; opsional: hapus @import di modul dan andalkan CSS global proyek.

Demo di proyek

Rute: /lightbox · Modul: templates/lightbox.js

File terkait

  • assets/modules/Lightbox/NexaLightbox.js — implementasi
  • assets/modules/nxdom.js — re-export Lightbox / NexaLightbox
  • templates/lightbox.js — contoh route

Dialog formulir overlay: NX.Modal.