WPサイト奮闘記5-タブごとにeasy sliderを実行
ユーザーの操作(「前ページ」、「次ページ」をクリック)により、データベースの内容を読んでページを書き換える、それがタブ毎に発生するとき、
方法1:Ajax により 表示タブのデータ部分のみ書き換える
方法2:事前にすべてのデータを読み込み、表示の基準点を変える
今回は、データ件数がそれ程多くないことと、形式が似ていることで、方法2を選択。
ここで問題が発生。
各タブごとに easySlider() 宣言しても、タブ2(2つ目のタブ)以降が表示されない。
原因:
easySlider.js 内の
this.each(function() {
var obj = $(this);
var s = $(“li”, obj).length;
var w = $(“li”, obj).width();
var h = $(“li”, obj).height();
タブ1の表示ページのs,w,h は正確だが、
タブ2以降の表示ページは、s のみ正確で、 w,h は 0 となる
最初の時点では、タブ2以降の表示ページ用データは
宣言のみされて、実際オブジェクトとして作成されていないためではないか思われる。
対策:
.each() は最初だけで、タブ切り替え時(オブジェクトが作成されたとき)には通らないため、
w, h が 0 になった後、強引に w と h の値を設定。
タブ2以上のeasySlider() 宣言のパラメータとして
$(“slider2”).easySlider({
prevId: ‘prevBtn2’,
nextId: ‘nextBtn2’,
// first, last も使用する場合
firstId: ‘firstBtn2’,
lastId: ‘lastBtn2’
});
が必要。
「jQueryを使用したシンプルなスライドボックス」( http://solidstate.jp/ContentsDisplay/slidebox/script_169.html ) に感謝。