jQuery入門講座：カルーセルとnivo(3)

カルーセルとnivo(3)

概要

今回でcarouFredSelとnivo sliderの連携は完結する予定だったのですが、問題が生じたため次回の完結になると思います。

解説

まずはnivo sliderの復習

私自身nivo sliderをどのように改造（Nivo Sliderの改造）したのか忘れてしまったので、ここで復習しておきます。サンプル（fred10/01.html）を開いてソースを確認して下さい。

このサンプルは「nivo sliderの改造」で説明した（nivo4/02.html）をベースにしています。表示している画像が異なるだけでcssやjQueryは同じ事を確認して下さい。buttonをクリックした時の処理も以下の様に同じになっているので、buttonをクリックすると「D」の画像に切り替わります。 ※0から始まる（Aが0）のでDは3番目です。

nivo sliderを外部から操作するためにはid属性「#nivoNavi+表示したい画像番号」をtriggerメソッドでクリックします。以下のサンプルでは「#nivoNavi3」となっているので3番目の画像「D」が表示されます。

$("button").click(function(){
	$("#nivoNavi3").trigger("click");
})

次はcarouFredSelとの連携を確認しやすいようにnivo sliderにオプションを設定します。
サンプル（fred10/01b.html）を開いてjQueryが以下の様に変更されていることを確認して下さい。自動的に再生されないようにmanualAdvanceプロパティをfalseにして、さらにdirectionNavプロパティもfalseにしてnext/prevボタンを表示しないようにしています。
※前述のサンプルfred10/01.htmlでもnext/prevは表示されませんが、これは表示する画像を指定し忘れていたためでした。そのため表示されてないだけでクリックできるので、ここで消しています。

var nivoObj = new Object();
nivoObj.directionNav = false;
nivoObj.manualAdvance = true;
$('#slider').nivoSlider(nivoObj);

また外部から切り替えることができることを確認するためのbutton要素と、button要素をクリックした時のjQueryは削除しました。次項では、このサンプルにcarouFredSelを追加していきます。

カルーセルの追加

ではcarouFredSelを追加します。サンプル（fred10/02.html）を開いてソースを確認して下さい。前回作成したfred09/04.htmlのカルーセル処理をコピーしています。まだnivo sliderと連結していないのでカルーセルのサムネイルをクリックしてもnivo sliderは切り替わりません。

では実際にnivo sliderと連結します。サンプル（fred10/03.html）を開いてjQueryの以下の部分を確認して下さい。scrollプロパティ内で設定したonBeforeプロパティの処理（切替前に実行する）に2行追加されています。

追加したのは前回紹介した「data.items.visible[3]」を利用して中央のサムネイルのidの値を変数selectIDに代入してアラートで表示する処理です。結果としてカルーセルのサムネイルを切り替える前と最初に1回、中央のサムネイルのid属性の値がアラートで表示されます（最初にt_0と表示されるはずです）。

carouObj.scroll ={
	items:1,
	onBefore:function(data){
		//-----------------------切り替わる前に次のサムネイルのIDを取得
		var selectID = data.items.visible[3].id
		alert(selectID)
		$(data.items.old[3]).removeClass("nowCenter");
	},
	onAfter:function (data){
		$(data.items.visible[3]).addClass("nowCenter");
	}
}

あとは、このidを利用してnivo sliderへの操作「#nivoNavi+表示したい画像番号」に利用するだけです。サンプル（fred10/04.html）を開いてonBeforeプロパティに設定した処理が以下の様に変更されていることを確認して下さい。

onBefore:function(data){
	var selectID = data.items.visible[3].id.split("_")[1]
	$("#nivoNavi" + selectID).trigger("click");			
	$(data.items.old[3]).removeClass("nowCenter");
}

まずサムネイルのid属性の値から数値だけを取り出すために2行目の処理にsplitメソッドを追加しました。これで数値だけが取得できるので、3行目で「#nivoNavi+表示したい画像番号」に利用しています。これだけで、サムネイルが切り替わる演出の前にnivo sliderの画像が切り替わる演出が開始されるようになります。

実際にカルーセルを操作して、中央のサムネイルと同じ画像が表示されることを確認して下さい。

これまでのサンプルは動作確認しやすいように自動再生をOFFにしていましたが、最後に自動再生をONにしましょう。サンプル（fred10/04b.html）を開いてonBeforeプロパティに設定した処理が以下の様に変更されていることを確認して下さい。

var carouObj = new Object();
carouObj.items = {start:23};
//carouObj.auto = false;//---autoを有効にしました
carouObj.prev = ".carouPrev";
carouObj.next = ".carouNext";

autoプロパティをfalseにした設定をコメントアウトしているので（デフォルトの）自動再生モードになります。

これで問題なく連携したように見えるのですが、nivo sliderは「ボタンの連打」に対応していない（演出中の操作は無視されるためcarouFredSelを連打して操作すると、サムネイルと表示される画像がずれてしまいます）。ですので次回この問題を解決したいと思います。

次のページ：カルーセルとnivo(4)