Skip to main content

Share one lightbox

Give several albums one explicit collection and navigation order.

Wrap related photo sections in PhotoGroup. Pass the complete ordered collection to the group and each section's subset to its album.

app/pages/portfolio.vue
<script setup lang="ts">
import type { PhotoItem } from '@lupinum/nuxt-photo/app'

const landscapes: PhotoItem[] = [
  { id: 'coast', src: '/photos/coast.jpg', width: 1200, height: 800, alt: 'Coast' },
]
const portraits: PhotoItem[] = [
  { id: 'studio', src: '/photos/studio.jpg', width: 800, height: 1200, alt: 'Portrait' },
]
const allPhotos = [...landscapes, ...portraits]
</script>

<template>
  <PhotoGroup :photos="allPhotos">
    <section>
      <h2>Landscapes</h2>
      <PhotoAlbum :photos="landscapes" />
    </section>

    <section>
      <h2>Portraits</h2>
      <PhotoAlbum :photos="portraits" />
    </section>
  </PhotoGroup>
</template>

allPhotos defines next and previous order. Moving the sections in the page does not change that order.

Check collection identity

Every interactive descendant ID must exist in PhotoGroup.photos. A missing ID throws during registration. Duplicate collection IDs are invalid.

If a group receives a new collection that removes a still-rendered descendant, that trigger becomes inert until its ID returns or the descendant is removed.

Change setup-time lightbox options

lightbox is setup-time. Remount the group when a setting must add, remove, or replace its provider:

vue
<PhotoGroup
  :key="lightboxEnabled ? 'enabled' : 'disabled'"
  :photos="photos"
  :lightbox="lightboxEnabled"
>
  <PhotoAlbum :photos="photos" />
</PhotoGroup>

Open the final landscape and navigate next. The first portrait should appear.

Collections and navigation order explains why the group owns one explicit collection.