Lightbox

Customize the ready-made lightbox while keeping its provider-owned behavior.

Lightbox renders the ready-made viewer UI. It consumes a lightbox provider; it does not create a collection by itself.

Minimal usage

Wrap Lightbox and pass the wrapper to a ready-made collection component:

app/components/AppLightbox.vue

<script setup lang="ts">
import { Lightbox } from '@lupinum/nuxt-photo/app'
</script>

<template>
  <Lightbox />
</template>

app/pages/gallery.vue

<script setup lang="ts">
import AppLightbox from '~/components/AppLightbox.vue'
</script>

<template>
  <PhotoAlbum :photos="photos" :lightbox="AppLightbox" />
</template>

The album creates the provider before it renders AppLightbox.

Props

Lightbox has no public props. Configure the collection component, provider, global defaults, and slots instead.

Events

Lightbox emits no public events. Use useLightbox() or the collection controller when application code needs open and close state.

Slots

Slot	Props	Purpose
`counter`	`{ activeIndex, count }`	Replace the slide counter.
`actions`	`{ activeIndex, count, prev, next, close, toggleZoom, isZoomedIn, zoomAllowed, controlsDisabled }`	Replace the top action controls.
`caption`	`{ photo, index }`	Replace the active photo caption.
`slide`	`{ photo, index, width, height }`	Replace active slide image content.

Exposed template-ref API

Lightbox exposes no public template-ref API. PhotoAlbum and PhotoGroup expose LightboxHandle.

Important behavior

Rendering outside provider context throws a namespaced missing-context error.
The provider owns the collection, active index, focus trap, page isolation, gestures, zoom, transitions, and focus restoration.
Replacing a slot changes visible markup in that region. Keep native buttons, accessible names, disabled states, and visible focus in custom actions.
The built-in English labels come from PhotoDefaults and Nuxt configuration.

Custom action buttons

app/components/AppLightbox.vue

<script setup lang="ts">
import { Lightbox } from '@lupinum/nuxt-photo/app'
</script>

<template>
  <Lightbox>
    <template #actions="{ activeIndex, count, prev, next, close, controlsDisabled }">
      <button type="button" :disabled="controlsDisabled || activeIndex === 0" @click="prev">
        Previous
      </button>
      <button type="button" :disabled="controlsDisabled || activeIndex === count - 1" @click="next">
        Next
      </button>
      <button type="button" :disabled="controlsDisabled" @click="close">Close</button>
    </template>
  </Lightbox>
</template>

Customize the built-in lightbox shows the normal slot workflow. Use Build a lightbox from primitives only when the complete structure must change.