ギャラリー

の ギャラリー コンポーネントは、フルスクリーンのスライドショー モーダル ウィンドウ内に画像 (説明付きまたは説明なし) またはビデオを表示します。ギャラリーはさまざまな画面サイズに適応できるため、コンピューター、タブレット、スマートフォンでメディアを表示するのに便利です。

このチュートリアルでは以下の内容を取り上げます。

1. ギャラリーを設定するためのガイドライン
2. ギャラリーにメディアを追加する
3. ギャラリーグループを使用してギャラリー間の接続を作成する

ギャラリーの構築

ギャラリーは、リンク ブロック内に囲まれたクリック可能なサムネイルで構成されます。訪問者がライブ サイトでリンクの境界内をクリックすると、ギャラリーが開き、関連するメディアが表示されます。

ギャラリーを設定するには:

1. 案内する 挿入パネル > 高度な
2. を選択 ギャラリー コンポーネントをWebflowキャンバスにドラッグするか

ギャラリーサムネイル画像の機能

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

ギャラリーのサムネイルと大きなギャラリー モーダル ウィンドウに同じ画像を使用できます。Webflow は、すべてのインライン画像に対して適応可能なバージョンを自動的に生成します。詳細については、レスポンシブ画像の詳細をご覧ください。

代替コンテンツでギャラリーのサムネイルを変更する

プレースホルダー画像要素を置き換え、その中にさまざまなコンテンツ（タイトルやリンク以外の要素など）を挿入することができます。 ギャラリーリンク.

あるいは、 分割ブロック 背景画像を使用して、同等のサイズの画像サムネイルを作成します。

ギャラリーの外観を向上させる

ギャラリー リンクとそのコンテンツの両方をデザインすることができます。たとえば、ギャラリー リンク内にテキスト要素をネストすると、ギャラリー リンク コンポーネントのタイポグラフィをカスタマイズできます。

ギャラリー リンクをクリックすると開くモーダル ウィンドウの背景オーバーレイをカスタマイズすることはできませんが、必要に応じて画像やビデオ、および画像の説明を挿入できます。

ギャラリーにメディアを追加する

ギャラリー モーダル ウィンドウに画像と説明を含めるには:

1. 選択してください ギャラリーリンク キャンバスに
2. アクセス 要素設定パネル > ギャラリー設定 > メディア
3. クリック "画像を追加" ボタン
4. 選択する 画像を選択
5. から画像を選択してください アセットパネル
6. 説明を入力してください キャプション 分野
7. 選択する 保存

必要に応じて、ギャラリー リンクに多数の画像を挿入できます。これらの画像は、ギャラリー モーダル ウィンドウ内でスライドショーとして表示されます。

ご注意ください： 現在、ギャラリー要素ではギャラリー内の画像の代替テキストをサポートしていません。

ライトボックス モーダル ウィンドウにビデオを挿入するには:

1. 選択してください ライトボックスリンク キャンバスに
2. 案内する 要素設定パネル > ライトボックスの設定 > メディア
3. 「ビデオを追加” アイコン
4. 動画のURLを URL 分野
5. クリック 保存

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

CMS または e コマース コレクションのメディア コレクション フィールド (画像フィールド、マルチ画像フィールド、ビデオ フィールドなど) からサムネイル画像やライトボックス メディアを取得することで、動的なライトボックスを生成することができます。

動的コレクション フィールドをライトボックスのサムネイルにリンクするには:

1. 統合する ライトボックス 動的にリンクされたコレクションリストまたはCMSコレクションページに
2. プレースホルダーのサムネイル画像を選択する
3. アクセス 要素設定 > 画像設定
4. 「画像を取得」のボックスにチェックを入れます ブログ投稿（コレクション名は選択したコレクションによって異なる場合があります）
5. 画像コレクションフィールドを以下から選択 フィールドを選択 落ちる

次に、ライトボックスとコレクション フィールド間の接続を確立して、ライトボックスで動的なコレクション画像にアクセスできるようにします。動的なコレクション フィールドをライトボックス メディアに添付するには、次の手順を実行します。

1. 選択してください ライトボックスリンク
2. アクセス 要素設定 > ライトボックスの設定 > メディア
3. 「メディアを取得する」というチェックボックスをオンにします。 ブログ投稿（コレクション名は選択したコレクションによって異なる場合があります）
4. メディアコレクションフィールドを フィールドを選択 落ちる

ライトボックス クラスターを使用してライトボックス ユニットを接続する手順

複数のライトボックスを相互接続してスライドショー ギャラリーを作成するオプションがあります。訪問者がリンクされたライトボックスをクリックすると、関連付けられたライトボックス グループに関連するすべてのメディアが表示されます。

ライトボックスクラスターを作成するプロセス

1. 任意の要素を選択します ライトボックス
2. 進む 要素設定 > ライトボックスの設定
3. 「他のライトボックスと相互リンクする」というボックスにチェックを入れます
4. 指定を入力してください クラスタ

追加のライトボックスを同じクラスターにリンクする

他のライトボックスをクラスターに接続するには、ライトボックスごとに次の手順に従います。

1. 任意の要素を選択してください ライトボックス
2. 案内する 要素設定 > ライトボックスの設定
3. 「他のライトボックスと相互リンク」というタイトルのボックスにチェックを入れます
4. 同一のものを入力する クラスター名

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

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

同じページに複数のライトボックスが表示される場合は、異なる値を割り当てることで区別することができます。 クラスター名.