Build your first album

Build a styled album with a working lightbox. Start with the photos below, then replace them with your own data after the example works.

Prerequisites

• Complete Installation, including css: 'all'.

1. Add the album page

Paste this into a page. The image URLs include their dimensions, so the example works before you add files to public/.

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

const photos: PhotoItem[] = [
  {
    id: 'landscape',
    src: 'https://picsum.photos/id/1018/1280/800',
    width: 1280,
    height: 800,
    alt: 'Sample landscape photo',
    caption: 'Landscape',
  },
  {
    id: 'portrait',
    src: 'https://picsum.photos/id/1015/960/1200',
    width: 960,
    height: 1200,
    alt: 'Sample vertical photo',
    caption: 'Portrait',
  },
  {
    id: 'wide',
    src: 'https://picsum.photos/id/1020/1200/800',
    width: 1200,
    height: 800,
    alt: 'Sample wide photo',
    caption: 'Wide Frame',
  },
]
</script>

<template>
  <PhotoAlbum :photos="photos" :layout="{ type: 'rows', targetRowHeight: 240 }" />
</template>

Reload the page. You should now see a justified rows gallery. Click any photo to open the lightbox; swipe, pinch to zoom, or press Esc to close.

2. Check the result

Start the development server and open the page. You should see three photos in rows that fill the available width. Selecting a photo opens the included lightbox. Press ArrowLeft or ArrowRight to navigate, then press Escape. Focus should return to the selected thumbnail.

3. Use your own photos

Every photo is a plain object with four required fields:

alt, captions, descriptions, placeholders, and metadata are optional. Add meaningful alt text unless the image is decorative.

import type { PhotoItem } from '@lupinum/nuxt-photo/app'

export const gallery: PhotoItem[] = [
  {
    id: 'desert',
    src: '/photos/desert.jpg',
    width: 1280,
    height: 800,
    alt: 'Desert at golden hour',
    caption: 'Desert Light',
  },
]

Choose the next task

• Choose a component when you need a single photo, several albums, or a carousel.
• Use your CMS photos when data comes from an API or content system.
• Tune responsive layouts when the rows, spacing, or breakpoints need to change.