WPサイト奮闘記５－タブごとにeasy sliderを実行

ユーザーの操作（「前ページ」、「次ページ」をクリック）により、データベースの内容を読んでページを書き換える、それがタブ毎に発生するとき、
方法１：Ajax により　表示タブのデータ部分のみ書き換える
方法２：事前にすべてのデータを読み込み、表示の基準点を変える

今回は、データ件数がそれ程多くないことと、形式が似ていることで、方法２を選択。

ここで問題が発生。
各タブごとに easySlider() 宣言しても、タブ２（２つ目のタブ）以降が表示されない。

原因：
easySlider.js 内の
　　　this.each(function() {
var obj = $(this);
var s = $(“li”, obj).length;
var w = $(“li”, obj).width();
var h = $(“li”, obj).height();

タブ１の表示ページのs,w,h は正確だが、
　　　タブ２以降の表示ページは、s のみ正確で、　w,h は 0 となる
　　　最初の時点では、タブ２以降の表示ページ用データは
　　　宣言のみされて、実際オブジェクトとして作成されていないためではないか思われる。
対策：
　　　.each() は最初だけで、タブ切り替え時（オブジェクトが作成されたとき）には通らないため、
　　　w, h が 0 になった後、強引に w と h の値を設定。

　　　タブ２以上のeasySlider()　宣言のパラメータとして
　　　$(“slider2”).easySlider({
prevId: ‘prevBtn2’,
nextId: ‘nextBtn2’,
// first, last も使用する場合
firstId: ‘firstBtn2’,
lastId: ‘lastBtn2’
});
が必要。

　　「jQueryを使用したシンプルなスライドボックス」( http://solidstate.jp/ContentsDisplay/slidebox/script_169.html ) に感謝。