LightBoxImage

画像のサムネイルを表示し、このサムネイルをクリックすると全画面表示の画像が開きます。

小さな画像を全画面表示で開き、高い解像度で詳細を確認できるようにするために使用します。

使用方法

プレースホルダに画像を追加するか、ImageURLパラメータを設定します。ギャラリーの画像間を移動するには、画像に同じGroupパラメータを設定します。

1. LightBoxImageパターンをプレビューにドラッグします。

2. 画像を［Thumbnail］プレースホルダにドラッグします。

   

3. パブリッシュしてテストします。

   

.pswp__bg {
    background-color: rgba(0, 0, 0, 0.8);
}

.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption {
    background-color: rgba(0, 0, 0, 0);
}

.lightbox-content-thumbnail img,
.pswp__item img {
  border-radius: var(--border-radius-soft);
}