Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

LightBoxImage

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

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

使用方法

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

  1. LightBoxImageパターンをプレビューにドラッグします。
  2. 画像を[Thumbnail]プレースホルダにドラッグします。

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

入力パラメータ

入力名 説明 必須 デフォルト値
Title 表示される画像のタイトル。 Text False なし
Group Gallery内に同じグループの画像が表示されます。 Text False なし
ImageURL [Image]プレースホルダの画像に置き換わる画像のURL。Text False なし
ImageZoom ズーム値を使用して、サムネイルサイズに基づき、全画面で開く画像のサイズを定義します。描画の問題を避けるため、同じ比率の画像を使用するようにしてください。たとえば、100x100のサムネイルでズームが2の場合は200x200で開き、500x500のサムネイルでズームが0.5の場合は250x250で開きます。 Decimal False 2

レイアウトおよびクラス

高度なユースケース

LightBoxImageオーバーレイを変更する

カスタムCSSを追加して、LightBoxImageオーバーレイを開いたときの不透明度を変更することができます。これをアプリケーションに実装するには、以下のCSSコードをコピーしてテーマに追加します。

.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);
}

LightBoxImage内の画像に丸い角を追加する

LightBoxImage内の画像に丸い角を追加するには、以下のカスタムCSSをテーマに追加します。

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

  • Was this article helpful?