Light Box Image
この記事は作成中です。この新しいバージョンはどの程度参考になりましたか。投票でお聞かせください。
Lightbox Image UIパターンを使用すると、小さなサムネイル画像を全画面モードで開くことができます。各画像間を移動して各画像の詳細を表示することができる画像ギャラリーを作成する場合に、このUIパターンがよく使用されます。
Light Box Image UIパターンの使用方法
-
Service Studioのツールボックスで
Light Box Imageを検索します。Light Box Imageウィジェットが表示されます。
-
ツールボックスから、Light Box Imageウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
-
ツールボックスから、ImageウィジェットをLight Box Imageウィジェットにドラッグします。これがサムネイル画像になります。
［Select Image］ポップアップが表示されます。
-
表示する画像を選択またはインポートします。この例では、OutSystems UIのサンプル画像を使用します。
注記: この例では、画像のTypeプロパティはStaticに設定されています。External URLまたはDatabaseを選択することもできます。
-
Widget TreeでLight Box Imageウィジェットを選択します。
-
［Properties］タブで関連するLight Box Imageのプロパティを設定します。たとえば、表示される画像のタイトル、画像が属するグループ、全画面モードで表示する画像のサイズなどを設定します。
-
Light Boxパターンに含める画像ごとに手順2～6を繰り返します。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
| プロパティ | 説明 |
|---|---|
| Title（Text型）: オプション | 画像を全画面モードでプレビュー表示するときに表示される画像のタイトル。 例
|
| Group（Text型）: オプション | 画像のグループの名前。画像のアルバムの概念に似ています。全画面モードで表示しているときに同じグループの画像を移動することができます。 例
|
| ImageURL（Text型）: オプション | 全画面モードで表示する画像のURL。空の場合、サムネイルを拡大したものが表示されます。サムネイルでは低画質の画像を読み込み、全画面モードでは高画質の画像を表示するときにこれを使用します。 |
| ImageZoom（Decimal型）: オプション | 全画面モードで開く画像の（サムネイルのサイズに基づく）サイズを定義します。 描画の問題を避けるため、同じ比率の画像を使用するようにしてください。 例
|
| ExtendedClass（Text型）: オプション | Light Box Image UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|