Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

従来のWebアプリにのみ適用されます

 

 

OutSystems

Light Box Image

この記事は作成中です。この新しいバージョンはどの程度参考になりましたか。投票でお聞かせください。

Lightbox Image UIパターンを使用すると、小さなサムネイル画像を全画面モードで開くことができます。各画像間を移動して各画像の詳細を表示することができる画像ギャラリーを作成する場合に、このUIパターンがよく使用されます。

Light Box Image UIパターンの使用方法

  1. Service StudioのツールボックスでLight Box Imageを検索します。

    Light Box Imageウィジェットが表示されます。

  2. ツールボックスから、Light Box Imageウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

  3. ツールボックスから、ImageウィジェットをLight Box Imageウィジェットにドラッグします。これがサムネイル画像になります。

    Select Image]ポップアップが表示されます。

  4. 表示する画像を選択またはインポートします。この例では、OutSystems UIのサンプル画像を使用します。

    注記: この例では、画像のTypeプロパティはStaticに設定されています。External URLまたはDatabaseを選択することもできます。

  5. Widget TreeでLight Box Imageウィジェットを選択します。

  6. Properties]タブで関連するLight Box Imageのプロパティを設定します。たとえば、表示される画像のタイトル、画像が属するグループ、全画面モードで表示する画像のサイズなどを設定します。

  7. Light Boxパターンに含める画像ごとに手順2~6を繰り返します。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
Title(Text型): オプション 画像を全画面モードでプレビュー表示するときに表示される画像のタイトル。

  • "Image 1" - Image 1が画像のタイトルとして表示されます。
Group(Text型):オプション 画像のグループの名前。画像のアルバムの概念に似ています。全画面モードで表示しているときに同じグループの画像を移動することができます。

  • Gallery 1 - この画像を_Gallery 1_グループに追加します。
ImageURL(Text型):オプション 全画面モードで表示する画像のURL。空の場合、サムネイルを拡大したものが表示されます。サムネイルでは低画質の画像を読み込み、全画面モードでは高画質の画像を表示するときにこれを使用します。
ImageZoom(Decimal型):オプション 全画面モードで開く画像の(サムネイルのサイズに基づく)サイズを定義します。

描画の問題を避けるため、同じ比率の画像を使用するようにしてください。

  • 2 - サムネイルが100x100でズームが2の場合、200x200で開きます。
  • 0.5 - サムネイルが500x500でズームが0.5の場合、250x250で開きます。
ExtendedClass(Text型):オプション Light Box Image UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるLight Box Image UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるLight Box Image Image UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?