Collections and navigation order

Each lightbox provider owns one ordered photo collection. Thumbnails can appear in several child components, but those children do not create navigation order.

Separate visual order from navigation order

PhotoGroup owns one explicit collection. Descendants only provide triggers.

Reset

1. Desert Light
2. Ocean Glass
3. Evening Canyon
4. Forest Haze
5. Alpine Frame
6. Soft Coast
7. Lavender Dreams
8. Cascade

Code State

Copy

<PhotoGroup :photos="photos">
  <PhotoAlbum :photos="firstAlbum" />
  <PhotoAlbum :photos="secondAlbum" />
</PhotoGroup>

{
  "visualOrder": [
    "desert-light",
    "ocean-glass",
    "evening-canyon",
    "forest-haze"
  ],
  "navigationOrder": [
    "desert-light",
    "ocean-glass",
    "evening-canyon",
    "forest-haze",
    "alpine-frame",
    "soft-coast",
    "lavender-dreams",
    "cascade"
  ]
}

PhotoGroup owns the collection

<PhotoGroup :photos="[...landscapes, ...portraits]">
  <PhotoAlbum :photos="landscapes" />
  <PhotoAlbum :photos="portraits" />
</PhotoGroup>

The PhotoGroup.photos array defines the previous and next sequence. Each descendant registers its thumbnail element and any custom slide renderer by photo ID.

This explicit order matters because DOM order can change when responsive sections move, conditional components mount, or keyed lists reorder.

Collection rules

• Every ID is a non-empty string and is unique in the collection.
• Every descendant photo ID exists in the group collection.
• One ID cannot register competing custom slide renderers.
• One active provider owns modal focus and page isolation.

When an album is inside a group, its exposed open(index) method translates the local album item to its stable ID before opening the group lightbox.