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

カルーセルとnivo(1)

概要

nivo sliderの改造で外部からnivo sliderを操作できるようにました。ですので今回はcarouFredSelのサムネイルからnivo sliderを操作しようと思います。今回だけでは終わらなかったので、次回以降も引き続き説明する予定です。

解説

中央のサムネイルをcssで修飾する(1)

まずは現在選択されているサムネイルが分かるように中央のサムネイルをcssで修飾します。これまでのサンプルでは一度に表示するサムネイル数が8個のため中央のサムネイルがありません。そこで今回利用するサムネイルは7つ表示するように変更しました。

サンプル（fred8/01.html）を開いて表示されているサムネイル数が7つになっていることを確認して下さい。最初は「D」のサムネイルが中央と言うことになります。表示する数はjQueryで変更しているのではなくcssでカルーセルの幅を480px→420pxに変更することで実現しています。

.thumb-wrapper {
	margin:20px;
	padding:10px 20px;
	background-color:#ddd;
	width:420px;
	overflow:visible;
	position: relative;
}

続いてjQueryを確認して下さい。ここで着目するのはコールバック「onBefore/onAfter」の設定です。これらはCarouFredSel(5)のメモでも紹介していますが、ここではより詳細な機能を利用します。
onBeforeはページを切り替える前に実行する処理を設定し、onAfterは切り替えた後に実行する処理を設定します。

これらのコールバックで設定するfunctionは引数を受け取ります（下表ではdata）。この引数「data」はobjectオブジェクトで色々な情報を持っている（本家Configページのscrollの項目内にあるonBeforeに詳細があります）のですが、利用頻度が高いのはサンプルで利用しているitemプロパティのoldとvisibleでしょう。

var carouObj = new Object();
carouObj.auto = false;
carouObj.prev = ".carouPrev";
carouObj.next = ".carouNext";
carouObj.scroll ={
	onBefore:function(data){
		$(data.items.old[3]).removeClass("nowCenter");
	},
	onAfter:function (data){
		$(data.items.visible[3]).addClass("nowCenter");
	}
}
$("ul").carouFredSel(carouObj);

7行目で利用している「data.item.old」はページを切り替える前に表示していたサムネイルを指します。このサンプルでは7つのサムネイルを表示しているので、7つの要素が含まれています。しかし今回は中央のサムネイルだけcssで修飾したいので、配列アクセス演算子を利用して3番目だけの要素を取得しました。その要素に対してremoveClassメソッドを利用してnowCenterクラスを削除するようにしています。この処理によってonBefore（ページが切り替わる前）のタイミングで、表示されていた中央のサムネイルからcssが外されます。

10行目で利用している「data.item.visible」は次に表示するサムネイルを指します。7行目と同じように中央のサムネイルだけ変更したいので最後に[3]を付け、addClassメソッドを利用してnowCenterクラスを付加しています。この処理によってonAfter（ページが切り替わった後）のタイミングで中央のサムネイルにcssが付加されます。削除したり付加するnowCentercssは以下の様に設定されているため、中央のサムネイルの背景色がピンクになります。

.nowCenter{
	background-color:#FCF;
}

実際にnext/prevボタンをクリックして中央のサムネイルだけ背景色がピンクになることを確認して下さい。

中央のサムネイルをcssで修飾する(2)

前項のサンプルでは、最初に中央に表示されている「D」のサムネイルにcssが付加されていません。ですので、最初に「D」のサムネイルにCSSを付加するようにします。サンプル（fred8/02.html）を開いてjQueryに以下の1行が追加されていることを確認して下さい。この処理だけで最初に中央のサムネイルにcssを付加できます。

$("ul>li:eq(3)").addClass("nowCenter");

これはプラグインの機能ではなく純粋なjQueryの処理です。セレクタが複雑で分かりにくいかもしれませんが、セレクタ:eq()を利用することで指定した要素番号の要素を選択しサムネイル（ul要素内にあるli要素）の3番目の要素にcssを付加しているだけです。

さらにnivo sliderと連携してショーケースを切り替えるためには、next/prevボタンで1つずつ切り替えるようにします。サンプル（fred8/03.html）を開いてcarouFredSelのscrollプロパティのitemsプロパティに1が追加されていることを確認して下さい。これで１つずつスクロールするようになります。

carouObj.scroll ={
	items:1,
	onBefore:function(data){
		$(data.items.old[3]).removeClass("nowCenter");
	},
	onAfter:function (data){
		$(data.items.visible[3]).addClass("nowCenter");
	}
}

実際にprev/nextボタンをクリックして1つずつ切り替わることを確認して下さい。

また、ここまでのサンプルは動作を確認しやすいように自動再生はOFFにしていますが、自動再生がONでも問題なく機能します。サンプル（fred8/03b.html）を開いてcarouFredSelの設定が以下の様に変更されていることを確認して下さい。

//-------------autoでも機能します
//carouObj.auto = false;
carouObj.prev = ".carouPrev";
carouObj.next = ".carouNext";
carouObj.scroll ={
	items:1,
	duration:100,
	onBefore:function(data){
		$(data.items.old[3]).removeClass("nowCenter");
	},
	onAfter:function (data){
		$(data.items.visible[3]).addClass("nowCenter");
	}
}
$("ul").carouFredSel(carouObj);

まず2行目でautoプロパティの設定がコメントアウトされたため自動再生の設定となります。また自動再生を確認しやすいように7行目でscrollプロパティにdurationプロパティを追加して100を設定しました。これで切替の演出の時間（ミリ秒）を変更できます。この設定を変更すると切り替わるタイミングも変更されるようです。

このように様々な設定に変更しても、きちんと中央のサムネイルにだけcssが設定されることが確認できました。しかし現在は最初に「D」が中央となり不自然ですので、最初に「A」が中央に来るようにしましょう。

サンプル（fred8/04.html）を開いてcarouFredSelの設定が以下の様に変更されていることを確認して下さい。itemプロパティのstartプロパティに数値を設定することで、最初に表示するサムネイルを指定できます（このサンプルでは左端のサムネイル「X」）。「X」のサムネイルは23番目なので以下の2行目のように23が設定されています。

var carouObj = new Object();
carouObj.items = {start:23};
carouObj.auto = false;
carouObj.prev = ".carouPrev";
carouObj.next = ".carouNext";

結果として最初に「A」のサムネイルが中央に表示されるようになったことを確認して下さい。次回も引き続きnivo sliderとの連携について説明していきます。

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