reelkitReelKit

ギャラリーのスライドショー

アルバムを全画面で開くと、視聴者が一時停止するまで写真が 1 枚ずつ自動で再生されます。どの写真も保存でき、保存されるのは画面に表示している縮小版ではなく、わかりやすい名前を付けた元のファイルです。

試してみる

どのバージョンも ./api をインポートしています。これはバックエンドの代わりで、photos は Lightbox の LightboxItem の形にしたアルバムです。各写真には、表示するアドレス、ダウンロードするファイル、保存するときの名前が入っています。自分のアルバムに置き換えてください。

typescript
import { cdnUrl } from '@reelkit/example-data';

// Stands in for your backend: an album of photos. Each one has the shape of
// `LightboxItem` from the lightbox of your framework, so the list goes to the
// lightbox as it is.

export interface Photo {
  src: string;
  title: string;
  downloadUrl: string;
  downloadName: string;
}

const kTitles = [
  'Morning light',
  'Coastline',
  'Old town',
  'Forest path',
  'Harbour',
  'Mountain pass',
  'Market day',
  'Night street',
  'Lakeside',
];

export const photos: Photo[] = kTitles.map((title, i) => {
  const file = `samples/images/image-${String(i + 1).padStart(2, '0')}.jpg`;
  return {
    // Your app would show a resized copy here and keep the original for the
    // download. The sample CDN serves one size, so both point at one file.
    src: cdnUrl(file),
    title,
    downloadUrl: cdnUrl(file),
    downloadName: `${title.toLowerCase().replace(/\s+/g, '-')}.jpg`,
  };
});
サンプルのメディアは reelkit.dev でしか使えません

cdnUrl が作るのは cdn.reelkit.dev へのリンクで、このサーバーは ReelKit のサイトにしかファイルを返しません。お使いのアプリでは写真の表示もダウンロードもできないので、このファイルをコピーする前に src と downloadUrl を自分のファイルに向けてください。

GallerySlideshow.tsx
GallerySlideshow.vue
gallery-slideshow.component.ts

写真を開くと、すぐにスライドショーが始まり、3 秒ごとに次へ進みます。バーから一時停止するか、ダウンロードボタンで写真を保存してください。

仕組み

  • 2 つのプロパティで、Lightbox がダウンロード付きのスライドショーになります。 autoAdvance は Lightbox が開いた瞬間に再生を始め、showDownload は表示中の写真を保存するボタンを加えます。デフォルトのバーには、再生・一時停止ボタンとダウンロードボタンが自動で加わります。どちらのプロパティも React、Vue、Angular で説明しており、各ページのすぐ後ろにダウンロードの項があります。
  • スライドショーは写真ごとに待ちます。 autoAdvanceInterval は写真の読み込みが終わった時点から数えるので、接続が遅くても、誰も見ていない写真が飛ばされることはありません。タイミングを決めているのは core の createSlideshowController で、自動再生のガイドで説明しています。
  • 主導権は視聴者にあります。 スワイプやキー操作で手動で進むと、スライドショーは続いたまま、次の写真の間隔が 0 から数え直されます。PlayPauseButton で止めたり再開したりでき、ポインターがボタンやキャプションの上にあるあいだは待機します。loop を設定していなければ、最後の写真で止まります。
  • 小さなコピーを表示し、元のファイルを保存します。 src は画面に表示するものなので、縮小版にすればギャラリーは軽くなります。downloadUrl はボタンが保存するもの、downloadName は保存されるファイル名なので、視聴者は内容のわかる名前で元の写真を手元に残せます。サンプルの CDN は 1 つのサイズしか配信しないので、ここでは両方が同じファイルを指しています。これらのフィールドは LightboxItem 型に載っています。
  • 別オリジンからのダウンロードには CORS が必要です。 別オリジンへのリンクでは download 属性が無視されるので、Lightbox はファイルを取得して保存します。そのためには、ファイルのサーバーがお使いのサイトに対して Access-Control-Allow-Origin を返す必要があります。返さない場合は代わりに写真を新しいタブで開くので、視聴者はそこから保存できます。downloadFile を参照してください。

次のステップ

  • ストーリーズトレイ - Stories Player を開き、視聴済みを覚えておくリングの列
  • Lightbox - Lightbox のプロパティ、スロット、部品のすべてLightbox - Lightbox のプロパティ、スロット、部品のすべてLightbox - Lightbox のプロパティ、スロット、部品のすべて