Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 

OutSystems

Lightbox Image

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

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

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

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

    デフォルトで、Lightbox Imageウィジェットには[Image]プレースホルダが含まれています。ImageウィジェットをツールボックスからLightbox Imageウィジェットにドラッグして、必要な数の画像を追加ができます。

  3. Image]プレースホルダを選択し、[Properties]タブの[Image]ドロップダウンで、表示するサムネイル画像を選択またはインポートします。この例では、OutSystems UIのサンプル画像を使用します。

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

  4. 画像ごとに手順3を繰り返します。

  5. Widget TreeでLightbox Imageウィジェットを選択し、[Properties]タブで関連する(オプションの)プロパティを設定します。

プロパティ

プロパティ 説明
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型):オプション Lightbox Image UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



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

他のパターンとの互換性

Lightbox Image UIパターンは画像でのみ使用できます。

サンプル

Product OverviewのサンプルでLightbox Image UIパターンがどのように使用されているかについてご覧ください。

  • Was this article helpful?