Lightbox Image
Lightbox Image UIパターンを使用すると、小さなサムネイル画像を全画面モードで開くことができます。各画像間を移動して各画像の詳細を表示することができる画像ギャラリーを作成する場合に、このUIパターンがよく使用されます。
Lightbox Image UIパターンの使用方法
-
Service Studioのツールボックスで
Lightbox Imageを検索します。Lightbox Imageウィジェットが表示されます。
-
ツールボックスから、Lightbox Imageウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
デフォルトで、Lightbox Imageウィジェットには［Image］プレースホルダが含まれています。ImageウィジェットをツールボックスからLightbox Imageウィジェットにドラッグして、必要な数の画像を追加ができます。
-
［Image］プレースホルダを選択し、［Properties］タブの［Image］ドロップダウンで、表示するサムネイル画像を選択またはインポートします。この例では、OutSystems UIのサンプル画像を使用します。
注記: この例では、画像のプロパティはLocal Imageに設定されています。External URLまたはBinary Dataを選択することもできます。
-
画像ごとに手順3を繰り返します。
-
Widget TreeでLightbox Imageウィジェットを選択し、［Properties］タブで関連する（オプションの）プロパティを設定します。
プロパティ
| プロパティ | 説明 |
|---|---|
| Title（Text型）: オプション | 画像を全画面モードでプレビュー表示するときに表示される画像のタイトル。 例
|
| Group（Text型）:オプション | 画像のグループの名前。画像のアルバムの概念に似ています。同じグループの画像がギャラリーに表示されます。全画面モードで表示しているときに同じグループの画像を移動することができます。 例
|
| ImageURL（Text型）:オプション | 全画面モードで表示する画像のURL。空の場合、サムネイルを拡大したものが表示されます。サムネイルでは低画質の画像を読み込み、全画面モードでは高画質の画像を表示するときにこれを使用します。 |
| ImageZoom（Decimal型）:オプション | 全画面モードで開く画像の（サムネイルのサイズに基づく）サイズを定義します。 描画の問題を避けるため、同じ比率の画像を使用するようにしてください。 例
|
| ExtendedClass（Text型）:オプション | Lightbox Image UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|
他のパターンとの互換性
Lightbox Image UIパターンは画像でのみ使用できます。
