画像を洗練された方法で表示したり操作したりします。
基本的に、画像を表示する方法として、テーブルビューを使用する方法とスライダービューを使用する方法の 2 つがあります。テーブルビューは、画像のオーバーレイ表示に使用されるシンプルなスクリプト Lightbox Image Viewer 2.03 をベースにしており、スライダービューは、シーケンシャル イメージ ギャラリーである FrogJS をベースにしています。どちらのコントロールも GeneXus コード (サーバー側) から処理する Ajax イベントを管理するよう拡張されており、ユーザーは選択中の画像の作業を行えます。
コントロールは ImagesData という名前の SDT をロードします。ImagesData では、コントロールが表示する画像を指定できます。ImageData コレクションの各アイテム (ImagesData.ImagesDataItem) には次のプロパティがあります:
-
Id: ImageChanged イベントコントロールを処理する場合に画像を識別するのに役立つ内部 ID です。
-
Thumbnail (オプション): サムネイル画像の URL です。
-
Image: フルサイズ画像の URL です。
-
Caption: 画像の下に表示されるテキストです。
サムネイルはオプションですが、スライダービューを使用する場合はサムネイルの提供が推奨されています。サムネイルを提供することで画像間の移動がスムーズになります。
Sub 'ImageGalleryMenuSample'
&imagesDataItem.Id = "1"
&imagesDataItem.Thumbnail = "ImageGallery/sampleImages/imageth1.jpg"
&imagesDataItem.Image = "ImageGallery/sampleImages/image1.jpg"
&imagesDataItem.Caption = "Description 1"
&imagesData.Add(&imagesDataItem)
&imagesDataItem = new()
&imagesDataItem.Id = "2"
&imagesDataItem.Thumbnail = "ImageGallery/sampleImages/imageth2.jpg"
&imagesDataItem.Image = "ImageGallery/sampleImages/image2.jpg"
&imagesDataItem.Caption = "Description 2"
&imagesData.Add(&imagesDataItem)
&imagesDataItem = new()
&imagesDataItem.Id = "3"
&imagesDataItem.Thumbnail = "ImageGallery/sampleImages/imageth3.jpg"
&imagesDataItem.Image = "ImageGallery/sampleImages/image3.jpg"
&imagesDataItem.Caption = "Description 3"
&imagesData.Add(&imagesDataItem)
EndSub
Width
|
コントロールの幅を設定します。
|
Height
|
コントロールの高さを設定します。
|
Type
|
テーブルまたはスライダー。画像をテーブルビューで表示するかスライダービューで表示するかを設定します。
|
Appearance
|
|
LoadingImage
|
画像のロード中に表示する画像を設定します。
|
ThumbnailWidth
|
サムネイルの幅です。ImagesDataItem (サムネイルの指定なし) にのみ適用します。
|
ThumbnailHeight
|
サムネイルの高さです。ImagesDataItem (サムネイルの指定なし) にのみ適用します。
|
Appearance/Table
|
テーブルビューにのみ適用します。
|
Rows
|
テーブルの行数を設定します。0 に設定すると、コントロールは SDT にロードされた画像すべてを表示するのに必要な行数を作成します。
|
Columns
|
テーブルの列数を設定します。
|
BorderWidth
|
テーブルの幅を設定します。
|
BorderColor
|
テーブルの枠線の色を設定します。
|
CellSpace
|
テーブルのセルの間隔を設定します。
|
CellPad
|
テーブルのセルのパディングを設定します。
|
ResizeSpeed
|
画像をリサイズする速度を設定します。
|
DataBindings
|
|
ImagesData
|
表示する画像すべてを含む ImagesDATA SDT。
|
テーブルビューまたはスライダービューにおいて選択中の画像を変更するたびに、現在表示中の画像をユーザーに通知するイベントのトリガーをサーバーに送ります。これは、SelectedImageId を次のように使用して行います:
Event imageGallery1.ImageChanged
textBlock.Caption = "The current image is " + imageGallery1.SelectedImageId
EndEvent
このとおり、SelectedImageId は表示中の画像の ID を保持しています。スライダーを使用している場合は、ほかのイベントから SelectedImageId を使用して表示中の画像を変更できます。
Event TextblockPrevious.Click
&num = val(imageGallery1.SelectedImageId)
&num-=1
imageGallery1.SelectedImageId = &num.ToString()
EndEvent
Event TextblockNext.Click
&num = val(imageGallery1.SelectedImageId)
&num+=1
imageGallery1.SelectedImageId = &num.ToString()
EndEvent
上記のコードは、ImageGallery スライダーに次または前の画像を連続で表示するよう強制します。
このユーザーコントロールは、Responsive Web Design と互換性がありません。
|