Quick start

Pass an array of slides to <Lightbox> and bind its open state. That alone is a complete viewer — keyboard, gestures, zoom and transitions included.

<script lang="ts">
  import { Lightbox, type Slide } from 'picola/svelte';
  import 'picola/picola.css';

  const slides: Slide[] = [
    {
      src: '/photos/full/1.jpg',
      placeholder: '/photos/thumb/1.jpg', // shown instantly while src loads
      width: 2400,
      height: 1600,
      alt: 'A river running through a valley at dusk.'
    }
    // ...
  ];

  let open = $state(false);
  let index = $state(0);
</script>

<button onclick={() => ((index = 0), (open = true))}>Open gallery</button>

<Lightbox bind:open bind:index {slides} />

What each part does

• slides — an array of Slide objects. Only src is required. width / height prevent layout shift, placeholder shows instantly while the full image loads, and alt drives the built-in caption.
• bind:open — controls visibility. Set it to true to open; picola flips it back to false when the viewer closes.
• bind:index — the active slide. Writing it while the viewer is open navigates to that slide.

Where to go next

• Recipes — fly-from-thumbnail transitions, custom toolbars and captions, deferred loading, reactive slides and headless mode.
• Styling & theming — tune the look with CSS custom properties.
• API reference — every prop, event, snippet and type.