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.

Navigate prev / next slide
Jump ke slide pertama
Home
Jump ke slide terakhir
End
Tutup lightbox
Esc
Cycle focus dalam controls
Tab

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).