クイックスタート

スライドの配列を <Lightbox> に渡し、open の状態をバインドします。これだけで完全なビューワーです。キーボード、ジェスチャー、ズーム、トランジションを含みます。

<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} />

各要素の役割

slides — Slide オブジェクトの配列です。必須なのは src のみです。width / height はレイアウトシフトを防ぎ、placeholder はフル画像の読み込み中に即座に表示され、alt は組み込みのキャプションに使われます。
bind:open — 表示・非表示を制御します。true に設定すると開き、ビューワーが閉じると picola が false に戻します。
bind:index — アクティブなスライドを表します。ビューワーが開いている間にこの値を書き込むと、そのスライドに移動します。

次に読むべきもの

レシピ集 — サムネイルから飛び出すトランジション、カスタムツールバーとキャプション、遅延読み込み、リアクティブなスライド、ヘッドレスモード。
スタイリングとテーマ設定 — CSS カスタムプロパティで見た目を調整します。
API リファレンス — すべての prop、イベント、スニペット、型。