レッスン内容
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がある場合、それぞれのライトボックスグループに異なるグループ名を割り当てることで分けることができます。