Lightbox / 画像ビューワー

ときめく画像
ライブラリ

高速・型安全・拡張可能な Lightbox。依存ゼロのコアと、第一級の Svelte 5 アダプタ。ピンチズーム、ドラッグで閉じる、画像のデコード中でも乱れない遷移。

ドキュメントを読む

~15.6KB

min+gzip・アイコン込み

~11KB

依存ゼロのコア(min+gzip)

コアのランタイム依存

ナビゲーション中のロングタスク

サイズは min+gzip。ロングタスク数は picola のベンチマークでの計測値。

特徴

picola が違うところ。

パフォーマンス特化、小さなフットプリント、高い自由度。

コンポジタ駆動のトランジション

開閉・クリップ展開・スライド送りは Web Animations API によりコンポジタで実行されるため、画像のデコード中でもフレームレートが落ちません。

サムネイルから展開

開閉は起点のサムネイルからアニメーションします。object-fit: cover の切り抜きなら、拡大縮小ではなくクリップで画像全体を映し出します。

メモリ最適化

表示するのはアクティブなスライド±1枚だけ。範囲外の画像は切り離し、デコード済みのピクセルをブラウザに解放させます。

段階的な読み込み

プレースホルダからフルサイズ、またさらなる高解像度へのスムーズな段階読み込みに完全対応。

アプリのような操作感

ピンチ / ダブルタップ / ホイールズーム、iOS 風のラバーバンド、オーバースクロール、フリック、ドラッグやピンチで閉じる操作など。

スタイルが衝突しない

詳細度ゼロ(:where)の既定値とフラットな単一クラス。通常のカスケード順で上書きでき、!important も @layer も使いません。

本物の Svelte 5 実装

ツールバーやキャプションは snippet と実コンポーネントで組み、{@attach} で接続します。ジェネリックな Slide<T> が独自データを型付きのイベントまで届けます。SVG 文字列の注入も手動の mount も不要です。

依存ゼロのコア

依存ゼロで、ジェスチャー・物理・変形を担います。Svelte アダプタはその参照実装で、どんなフレームワーク向けにも書けます。

ライブデモ

お試しください

写真をクリックして、ピンチ・ズーム・下ドラッグで閉じる・キーボード操作を試してください。

ループ背景ぼかし

ヒント: 画像を下方向にドラッグすると閉じます。

クイックスタート

数行で、すぐ動く。

インストールして、CSSを読み込み、slides を渡すだけ。あとはすべてカスタマイズ次第。

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

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

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

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

<Lightbox bind:open {slides} />

import { createViewer } from 'picola';

const viewer = createViewer({ slides, startIndex: 0 });
viewer.attach({ viewport, track, backdrop });

viewer.on('change', ({ index }) => console.log(index));
viewer.open(0);

レシピ集を見る

テーマ

いくつかのカスタムプロパティで、あなたの色に。

すべてのコントロールは .pcl ルートの CSS カスタムプロパティで調整。!important もカスケードとの戦いも不要です。

--pcl-backdrop
blur(16px)--pcl-backdrop-filter
--pcl-chrome-color
--pcl-button-bg
3--pcl-caption-lines
48px--pcl-arrow-size

.pcl {
  --pcl-z: 2000;
  --pcl-backdrop: rgba(10, 10, 16, 0.55);
  --pcl-backdrop-filter: blur(16px);
  --pcl-chrome-color: #eafaff;
  --pcl-button-bg: rgba(92, 202, 233, 0.16);
  --pcl-caption-lines: 3;
}

今すぐ使ってみよう

picola を導入して、洗練された画像体験を届けましょう。

はじめる GitHub でスター

ときめく画像ライブラリ