Lightbox

lightbox 要素を使用して、フルスクリーンのモーダルウィンドウ内に画像や動画を表示します。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

lightbox要素は、フルスクリーンのスライドショーモーダルウィンドウ内に画像（キャプション付きまたはキャプションなし）や動画を表示します。また、lightboxはブレイクポイントをまたいでレスポンシブであるため、デスクトップ、タブレット、モバイルの各画面にメディアを表示するのに便利です。

このレッスンで学ぶこと

lightboxの作り方

lightboxは、link blockにネストされたクリック可能なサムネイルです。サイト訪問者がライブサイトでリンクをクリックすると、lightboxが開き、リンクに接続されたメディアが表示されます。

lightboxを追加するには

Add panel > Advanced
lightbox要素をクリックするか、キャンバスにドラッグします。

lightboxのプレースホルダー・サムネイル画像の仕組み

lightboxには、他のimage要素と同じように動作するimage要素が含まれています。サイズを変更したり、ダブルクリックしてプレースホルダのサムネイル画像を置き換えたり、altテキストを追加したりできます。 image要素の詳細については、こちらをご覧ください。

lightboxのサムネイルと大きなlightboxのモーダルウィンドウに同じ画像を使用できます。Webflow は、すべてのインライン画像に対してレスポンシブバリアントを自動的に作成します。

lightboxのサムネイルを他のコンテンツに置き換える方法

プレースホルダ画像要素を置き換えて、他のコンテンツ（見出しなど、リンク以外の要素）をlightboxのリンク内にドラッグ＆ドロップします。

また、div blockを使って背景画像を適用し、等倍のサムネイルを作成することもできます。

lightboxのスタイリング方法

lightbox linkとそのコンテンツの両方をスタイル設定できます。たとえば、lightbox linkにテキスト要素をネストする場合、lightbox link要素のtypographyをスタイルできます。

lightboxのリンクをクリックしたときに開くモーダルウィンドウの背景オーバーレイはカスタマイズできません。ただし、画像や動画を追加したり、画像のキャプションを追加したりすることはできます。

lightbox mediaの追加方法

lightboxのモーダルウィンドウに画像とキャプションを追加するには：

キャンバス上でlightbox linkを選択する
Element settings panel > Lightbox settings > Media
“Add image” アイコンをクリック
Choose imageをクリック
Assets panelから画像を選択
Caption fieldにキャプションを追加
Saveをクリック

lightboxリンクには、画像をいくつでも追加できます。これらの画像は、lightboxのモーダルウィンドウ内でスライドショーとして表示されます。

注：現在lightbox要素はライトボックス内の画像のaltテキストをサポートしていません。

lightboxのモーダルウィンドウに動画を追加するには：

キャンバス上のlightbox linkを選択
Element settings panel > Lightbox settings > Media
“Add video” アイコンをクリック
URL fieldにビデオのURLを追加
Saveをクリック

コレクションフィールドメディアからダイナミックライトボックスを作成する方法

CMSまたはEコマースコレクションのメディアコレクションフィールド（画像フィールド、マルチ画像フィールド、動画フィールドなど）からサムネイル画像やライトボックスメディアを取り込むことで、ダイナミックライトボックスを作成できます。

ダイナミックコレクションフィールドをライトボックスサムネイルに接続する：

動的に接続されたコレクションリストまたはCMSコレクションページにライトボックスを追加する
プレースホルダーのサムネイル画像を選択
Element settings > Image settings
“Get Image from Blog posts”にチェックを入れる（コレクション名は選択したコレクションによって異なります）。
Select field ドロップダウンから画像コレクションフィールドを選択します。

次に、lightboxをコレクションフィールドに接続すると、ダイナミックコレクションの画像をlightboxで利用できるようになります。ダイナミックコレクションフィールドをライトボックスメディアに接続するには

lightbox linkを選択
Element settings > Lightbox settings > Media
“Get Image from Blog posts”にチェックを入れる（コレクション名は選択したコレクションによって異なります）
Select field（フィールドの選択）ドロップダウンからメディアコレクションフィールドを選択する。

lightboxをmulti-image fieldに接続する方法

Collection list をCollection pageに追加する
Sourceドロップダウンをクリックし、multi-image fieldを選択して、コレクションリストをmulti-image fieldに接続します。
lightboxをCollection listに追加する
in the lightboxのimage要素を選択する
Element settings > Image settings
“Get Image from Blog posts”にチェックを入れる（コレクション名は選択したコレクションによって異なる場合があります）。
Select field ドロップダウンからmulti-image fieldを選択
キャンバスからlightbox linkを選択
Element settings > Lightbox settings
Get Media from Blog posts"（ブログ記事からメディアを取得）と書かれたボックスにチェックを入れる（コレクション名は選択したコレクションによって異なります）
Select field dropdownからmulti-image fieldを選択

ライトボックスグループ（lightbox group）を使ってlightboxをリンクする方法

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

lightbox groupの作り方

lightbox内の要素を選択する
Element settings > Lightbox settings
“Link with other lightboxes”をクリック
Group nameを入力

他のlightboxを同じグループにリンクする方法

他のライトボックスをグループにリンクするには、ライトボックスごとに以下の手順を完了します：

lightbox内の要素を選択
Element settings > Lightbox settings
“Link with other lightboxes”をクリック
Group nameを入力

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

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

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