セル型に「カルーセル」が使用できるようになり、自動または手動で、画像を横にスライドさせて切り替えて表示できます。

ダウンロードリンク

※利用しているバージョンによって対応するプラグインが異なります。以下より該当するバージョンをお選びください。

Forguncy Builder / Forguncy Serverのバージョン	プラグイン
10.0.10.0以降の10.x.x.x	Carousel_10_0_10_0.zip

配置領域

リストビューの行テンプレート

不可

使い方

1. 任意のセルの領域にカルーセル型セルを割り当てます。

   画像を表示する領域を選択して、［ホーム］→［セル型］のドロップダウンリストから［カルーセル］を選択します。

   

2. カルーセル型セルの詳細を設定します。

   右ペイン下部の［セル型］タブをクリックして、カルーセル型セルの設定を行います。

   

   テーブルからデータを取得	チェックされている場合、データベースから画像データを取得します。「カルーセル項目…」をクリックして連結するフィールドを指定してください。 チェックしていない場合、「カルーセル項目…」をクリックすることで、任意の画像を指定できます。 ［コマンド］をクリックすると、コマンド設定ダイアログボックスを表示します。 コマンド設定ダイアログボックスで、選択したコマンドが「ポップアップウインドウの表示」の場合、「詳細設定を表示」を行い、受け渡す値の後にをクリックし、ポップアップダイアログボックスで、変数一覧から変数を選択し、ダブルクリックして挿入します。 値、テキスト、説明、画像変数はシステムによって自動的に生成され、これらの4つのパラメーターを後続のコマンドで直接使用できます。 ↓
   カルーセル項目	切り替える画像を指定します。 「テーブルからデータを取得」がチェックされているとき、カルーセル項目をクリックすると、次の画面が表示されます。 接続するテーブルを指定し、以下の設定を行います。 ［選択］タブ 値、タイトル、説明、画像それぞれに連結するフィールドを指定します。 値 : 画像の値として表示するフィールドを指定します。 タイトル : 画像のタイトルとして表示するフィールドを指定します。 説明 : 画像の説明として表示するフィールドを指定します。 画像 : 表示する画像のフィールドを指定します。画像は画像型のフィールドを指定する必要があります。 ［クエリー］タブ クエリー条件を設定し、対象テーブルのレコードの絞り込みを行います。［値］には数式が使用できるため、他の変数を参照して条件値を指定することもできます。 クエリー条件の設定方法は、［クエリー］コマンドの「クエリーの条件設定」を参照してください。 ［先頭レコード］タブ ［取得する先頭レコードの数］を指定して、対象のレコードを絞ります。［スキップする先頭レコード数］に何も指定しなかった場合、1レコード目からを［取得する先頭レコードの数］に指定した数だけのレコードを取得します。たとえば、［スキップする先頭レコード数］に「2」を指定した場合、3レコード目からデータを取得します。数式が使用できるため、他の変数を参照してレコード数を指定することもできます。 ［並べ替え］タブ 並べ替え条件を指定し、複数レコードのレコード順序を変更します。 その他 キャッシュを有効にする キャッシュが有効な場合、クエリーの結果はキャッシュが失効するまでサーバーのメモリ上に保存されます。キャッシュが有効な場合は、ページを訪問したときにキャッシュから直接データを取得するため、データベースの負荷を大幅に軽減し、高連続性シナリオのパフォーマンスを向上させることができます。連結テーブルのデータの変更頻度が低く、また、更新処理時間の増加が許容できる場合は、有効にすることをお勧めします。 注意: 権限やクエリ条件の設定により、ログインしているユーザーによってデータベースから返される結果が異なる場合には、本設定を有効にしないでください。 「テーブルからデータを取得」がチェックされていない時は、次の画面が表示されます。 画面左のリスト 各画像を表します。追加したい場合は「＋」削除したい場合は「−」をクリックします。 コマンド 画像をクリックした時に実行されるコマンドを設定します。詳細は、コマンド（通常）を参照してください。 タイトル 画像のタイトルを入力できます。 説明 画像の説明を入力できます。 画像の選択 任意の画像ファイルを選択します。
   左右のスライドボタンの表示	チェックされている時、画像の左右に画像をスライドするボタンを表示します。 ボタンをクリックすると、前または次の画像に切り替わります。
   ナビゲーションの表示	チェックされている時、画像の下部にナビゲーション（○○○）を表示します。 ナビゲーションボタンをクリックすると、そのボタンに対する画像に切り替わります。 ナビゲーションボタンのデフォルトの色は白です。変更するには、以下のように文字の色として設定してください。
   タイトルと説明の表示	チェックされている時、画像のタイトルと説明を表示します。
   ループ表示	チェックされている時、最後の画像を表示した後、また最初の画像を表示してループします。 チェックされていない時、最後の画像を表示した後、画面の切替が止まります。
   自動表示切替	チェックされている時、画像が自動的に切り替わります。
   表示切替間隔（秒）	「自動表示切替」がチェックされている時、画像が切り替わる間隔を秒で指定します。
   マウスホバーで表示切替しない	「自動表示切替」がチェックされている時、「マウスホバーで表示切替しない」にチェックをすると、画像上にマウスカーソルを置くことで、画像の自動切り替えを停止します。

3. ［ホーム］リボンタブにあるデバッグの［開始］ボタンをクリックし、アプリケーションの動作を確認します。