Lightbox 要素を使用すると、フルスクリーンスライドショーモーダル内に画像（キャプション付きまたはキャプションなし）または動画を表示できます。また、すべてのデバイスでうまく機能するので、デスクトップ、タブレット、モバイルの各画面でメディアを簡単に表示することができます。

このレッスンでは

  1. ライトボックスを作成する
  2. ライトボックスメディアの追加
  3. ライトボックスグループを使用したライトボックスのリンク

について紹介しています。

1. ライトボックスを作成する

Lightbox icon thumbnail


ライトボックスは、リンクブロックにネストされた、画像要素のようなクリック可能なサムネイルです。ライブ サイトでは、リンクの境界内をクリックするとライトボックスがトリガーされ、リンクに接続されたメディアが表示されます。


ライトボックス コンポーネントを追加する

ネイティブのライトボックス コンポーネントには、これらの要素がすべて組み込まれています。ライトボックスを作成するために必要なことは、Addパネルからライトボックスコンポーネントを使用することです。

Step one on the left, select the lightbox element from the components section and drag it into place. Step two on the right, click on the image settings icon and click on the "choose image button".
Step three on the left, select the image desired from the assets panel. Step four on the right, preview the placed image in the lightbox container.

ライトボックスのサムネイルを更新する

デフォルトでは、ライトボックスのリンクには画像要素が含まれています。このサムネイルは、他の画像要素と同様に動作します。サイズを変更したり、ダブルクリックして置き換えたり、alt属性を追加したりすることができます。

On the left, an image element is being resized by clicking and dragging the bottom right anchor point of the image box. On the right, the image settings includes a highlighted area called Alt Text with a custom description of the image on the left. The alt text begins with "Gray concrete road during...".

サムネイルと大きなライトボックススライダービューに同じ画像を使用することができます。Webflowは、すべてのインライン画像に対してレスポンシブバリアントを自動的に作成します。

The same image is shown in six different sizes. To demonstrate the responsiveness of the image the different sizes display are original, 2000px, 1600px, 1080px, 800px and 500px.

レスポンシブイメージ機能は、プロジェクト内のすべての画像にサイズバリエーションを作成します。

Lightboxサムネイルの代わりに他のコンテンツを使用する方法

デフォルトの画像要素を削除して、見出しなどの他のコンテンツや、リンク以外の要素をLightboxリンクの中にドラッグ＆ドロップすることもできます。


また、Divブロックを使用して背景画像を適用し、等倍の画像サムネイルを作成することもできます。

A lightbox link includes an image of the Sutro baths in San francisco. There is a H1 headline and paragraph text included. The H1 text is Sutro Baths. The paragraph text is San Francisco, CA.

ライトボックスのスタイル設定

ライトボックスのリンクとその中のコンテンツにスタイルを設定することができます。たとえば、ライトボックスリンクにテキスト要素を追加する場合、ライトボックスリンク要素のタイポグラフィをスタイルして、デフォルトのリンクタイポグラフィスタイルをオーバーライドすることができます。


ライトボックス自体については、ライトボックス リンクをクリックしたときに開くモーダルはカスタマイズできません。つまり、背景のオーバーレイ、画像、キャプションをカスタマイズすることはできません。完全にカスタマイズ可能なライトボックスが必要な場合は、インタラクションを使用して作成することができます。

2. ライトボックスメディアの追加

ライトボックスのリンクとそのコンテンツの構造化とスタイル設定が完了したら、ライトボックスがトリガーされたときに表示するメディア（画像または動画）を選択できます。これは、要素設定パネルにあるライトボックスの設定で行うことができます。


The lightbox settings panel includes a button to add an image, a button to add a video, the name and thumbnail of an image already added with a delete icon to the right. There is also a check box for linking with other lightboxes.

画像の追加

画像を追加するには、ライトボックスを選択し、要素設定パネル → ライトボックスの設定で画像アイコンをクリックします。次に、アセットパネルから画像を選択するか、画像をアップロードします。


同じ手順で必要な数だけ画像を追加します。


Step one on the left, click on the image icon in the lightbox settings panel. Step two on the right, click on the "choose image" button then select the image from the assets panel.

動画を追加する

動画を追加するには、ライトボックスを選択し、要素設定パネル → ライトボックスの設定にある動画アイコンをクリックします。次に、YouTubeやVimeoなどのサードパーティーサイトからビデオのリンクを貼り付けます。


画像のキャプションを追加する

メディアとして画像を選択した場合、キャプションを追加するオプションがあります。画像のキャプションは、画像の下に直接表示されます。

Step one on the left, enter the caption text in the caption input field in the Add image pop up menu. Step two on the right, preview the caption at the bottom left of the added lightbox image.

コレクションからメディアを取得する

CMSコレクションやEコマースコレクションのメディアコレクションフィールド（画像フィールド、マルチ画像フィールド、動画フィールド）から、プレースホルダ画像やライトボックスメディアを取得して、ダイナミックライトボックスを作成することができます。


  1. コレクションリストまたはコレクションページでライトボックスを追加する
  2. プレースホルダー画像を選択します。
  3. 画像設定で、画像フィールドから画像を取得することを選択する
  4. ライトボックスの設定で、同じ画像フィールドまたはビデオフィールドからメディアを取得するように選択します
Step one on the left, select the image thumbnail placeholder. Step two on the right, under the image settings panel, select the main image option from the collection list "get image from" menu.
Step three on the left, select the light box link element. Step four on the right, select the main image option from the collection list "get media from" drop down menu within the Lightbox settings panel.
Five light box elements have been added to a collection list. These image are being added through a get media from a collection list feature.

ライトボックスをマルチイメージフィールドに接続するには。

  1. コレクションページでコレクションリストを追加する
  2. コレクションリストをマルチイメージフィールドに接続する
  3. イメージの設定で、Multi-image Fieldからイメージを取得するように選択します。
  4. ライトボックスの設定で、Multi-image Fieldからメディアを取得することを選択します

3. ライトボックスグループを使用したライトボックスのリンク

複数のライトボックスをリンクして、スライドショーギャラリーを作成することができます。リンクされたライトボックスをクリックすると、リンクされたグループに関連付けられたすべてのメディアが開きます。

ライトボックスグループの作成

ライトボックス内の任意の要素を選択します。

  1. 要素設定パネル → ライトボックスの設定で「他のライトボックスとリンクする」を有効にする
  2. グループ名を入力します


The lightbox settings panel includes a add image icon, add video icon, file name and thumbnail with a delete icon, a checked box for "link with other lightboxes" and a group name titled "2021 Road trip."

他のライトボックスを同じグループにリンクする

ライトボックスをリンクするには、グループにリンクする各ライトボックスについて上記の手順を繰り返し、グループの名前を入力します。

A light box group containing four images is previewing an image of the Sutro baths, San Francisco. There is a caption added that reads "Sutro baths, San Francisco"

コレクションリスト内のライトボックスの場合、コレクションアイテムにライトボックスを1つ作成しリンクすると、コレクションリスト内のすべてのライトボックスが自動的にリンクされます。

The lightbox settings panel includes a checked box for "get media from products" getting the main image, a checked box for link with other lightboxes and a group name titled 2021 Road trip.

1つのページに複数のライトボックスグループを作成する

同じページに複数のライトボックスがある場合、各ライトボックスグループに異なる名前を割り当てることによって、ライトボックスを分離することができます。