Lightbox
Flexible image and video lightbox built dengan reka-ui Dialog + Embla Carousel. Mendukung touch swipe, keyboard nav, thumbnail strip, download, autoplay, dan video auto-pause. Hybrid API: drop-in grid, custom trigger slot, atau fully controlled state.
1. Basic gallery
Default grid 3 sampai 6 kolom responsive. Klik thumbnail untuk membuka lightbox.
2. Custom trigger slot
Pakai #trigger slot dengan scope { open, openAt } untuk full control trigger UI.
3. Limit + first spans large
:limit="4" + first-spans-large. Item pertama mengisi 2x2, sisanya thumbnail kecil. Counter overlay menampilkan jumlah sisa.
4. Single trigger
Trigger custom hanya menampilkan 1 thumbnail dalam frame kecil aspect-4/5 w-32 tapi tetap pakai full gallery di lightbox.
Standard Suite
1 King Bed · 45 m² · Sea View
12 foto tersedia di gallery.
5. Mixed images + video
Array boleh berisi mix { type: "video", src } dan image objects. Video auto-pause saat slide berubah atau lightbox ditutup. Thumbnail video pakai poster dengan play overlay icon.
6. Programmatic control (v-model)
Pakai v-model:open dan v-model:index untuk kontrol eksternal. Trigger slot kosong supaya tidak render grid bawaan.
State: open = false, index = 0
7. Autoplay slideshow
:autoplay="3500" auto-advance setiap 3.5 detik. Hover untuk pause. Slide tipe video akan otomatis pause autoplay.
8. Minimal chrome
:show-thumbnails="false", :show-download="false", :show-counter="false". Hanya viewport + close + nav buttons.
9. Custom caption slot
Override #caption slot untuk full custom markup. Default caption diambil dari item.caption atau item.name.
10. Single item gallery
Kalau items berisi 1 saja, nav buttons + thumbnails + counter otomatis hidden. Hanya viewport + close + download.
Keyboard & accessibility
Saat lightbox aktif, shortcut berikut berlaku. Focus trap dan ARIA dialog handle by reka-ui Dialog. DialogTitle disediakan via VisuallyHidden untuk screen reader.
Custom counter format
Override counter via prop counterFormat. Default 1 / 12, contoh di bawah Image 1 of 6.
Zoom, fullscreen, share
Klik image untuk toggle zoom 1.6x. Tombol Fullscreen masuk ke fullscreen API browser. Tombol Share pakai Web Share API (mobile only / browser support).
Pull-to-close (mobile)
Di mobile, swipe vertical (atas atau bawah) sejauh 120px untuk tutup lightbox. Backdrop fade saat drag. Default swipeToClose aktif.
Compact 6-image preview
Drop-in style untuk gallery hotel detail (3 sampai 6 kolom).