フォトギャラリー2014年1月14日カルーセルパネル(パネルをスライドして1周すると元のパネルに戻る)やスライドパネルを使う際のメモと練習(実用的でないものがほとんど)。カルーセルパネルの表示(サンプル1)サンプル1シンプルなカルーセルパネルを表示する。設定によっては「表示領域の横幅」にパディングも含める必要がある。利用できるが、数値で指定した方が確実かもしれない。要素(id=”slider_inner”)の幅の算出にはパディングを含めるがパネルをスライドさせる距離ではパディング分を差し引かなければならなくなる可能性もある。設定によりこれらの値は変更しなければならない場合もあるので注意する。利用して一定間隔(3秒)で自動的にスライドさせる。カーソルがカルーセルの領域に入ると一時的にスライドを停止させ、ユーザーがクリックできるようにする。「止める」ボタン(「止める」と「開始」を兼ねる)を追加。start_carousel():カルーセルを開始。「止める」ボタンの文字を「Stop」に変更。「止める」ボタンの文字を「Start」に変更。構造を変更してみるサンプル1-2このサンプルの場合1つのパネルに4つのサムネイルを表示しているが、サムネイルを1つ追加する場合を考えてみる。要素をずらす必要があるので更新が面倒になる可能性がある(数が多ければ多いほど)。要素に変更するようにして、その後でカルーセルパネル(スライドパネル)の表示の記述を行えば、前述のサンプルと同じ結果になり更新も簡単になる(と思う)。#slider_wrap-->サムネイルの数(list_length)がパネルに表示する数(n)で割り切れれば簡単だが、そうでない場合を考慮しないとならない。して表示するようにする。現在表示されているパネルを表す画像を「slider-icon-selected.png」に設定パネルの数を表す画像のクリックイベントを設定クリックイベントの中で遅延時間を調整できるようにするため、「進む」「戻る」ボタンをクリックした際の処理を関数にしておくまた、位置がずれないようにするためアニメーション中はパネルの数を表す画像をクリックしても何もしないようにする。});});</script>少し変更してみる前述のサンプルでは、パネルの数を表す画像をクリックした場合、少し動きがぎこちないので以下のように変更してみる。});});</script>スライドショーを追加カルーセルパネルのサムネイル画像をクリックすると、それに対応するメインの画像を表示するようにする。383)のフォルダ:images/photos/画像名は同じものにするメインの画像を表示する領域(id=”main_photo”)を追加。要素はスライドショーで使いやすいように設定。hidden」はメインの画像をスライドで表示する場合に必要。});スライドさせて表示クロスフェードではなく、メインの画像をスライドさせて表示する例。サンプル2-3基本的にはクロスフェードと同じ。});サンプル2-3では、元の画像がスライドして、その下に新しい画像が表示されるが、以下は新しい画像がスライドして上に表示される例。});画像1枚分スライドさせる(サンプル3)パネルをスライドさせるのではなく、画像1枚分スライドさせる場合。自動的にスライドを開始。「停止」ボタンをクリックするとスライドを停止。要素の中に全てのサムネイル画像を配置したが、何らかの理由で「サンプル1」のようなパネルの構造を使う場合。サンプル1とほぼ同じ。なるが、この場合はパネルの移動を行わない。」の場合のみ、パネルの移動を行う。});});</script>パネルをスライドする操作を追加(サンプル3-3)前述(サンプル3-2)に、パネルをスライドする操作を追加してみる。サンプル3-3「停止ボタン」をクリックすると、パネルをスライドさせるリンクを表示。パネルをスライドする関数「slide_panel()」を追加。表示されているサムネイルの位置がパネルの先頭でない場合は、パネルの先頭に移動。表示されているサムネイルの位置がパネルの先頭の場合は、パネルをスライド。