jQuery入門講座：カルーセル CarouFredSel(4)

カルーセル CarouFredSel(4)

概要と組み込み

carouFredSelは色々なオプションを選択することができます。ここでは前回に引き続きcarouFredSelのオプションについて説明していきます。

構文

前回に引き続きcarouFredSelのオプションを説明します。今回紹介するのは下表の赤字のオプションです。

カルーセルの設定返値：jQueryオブジェクト: jQo.carouFredSel( オプション )
※オプションはobjectオブジェクトで設定し、以下のプロパティを利用してカルーセルの詳細を操作します。
※プロパティには以下の種類があります。
・circular…trueでループ指定、falseでは先頭に戻る演出（デフォルトはtrue）
・infinite…上記circularの設定がfalseの時のみ利用できます。falseに設定すると最後で停止します。
・responsive…親要素のサイズに合わせて子要素のサイズを変更するか否か（デフォルトはfalse）
・direction…「left」「right」「up」「down」でスライド方向の設定（デフォルトはleft）
・width…幅の設定。数値の他に%やautoの設定が可能。variableを設定するとサムネイルの幅に応じて変化
・height…高さの設定。数値の他に%やautoの設定が可能。variableを設定するとサムネイルの幅に応じて変化
・align…「center」「left」「right」で整列位置の設定（デフォルトはcenter）
・padding…paddingの設定。配列を利用することで個別設定が可能
・synchronise…他のカルーセルと同期させる
・cookie…サムネイルの位置をクッキーに記憶させるか否か
・onCreate…カルーセルを作成した時に実行したい処理を設定
・items…サムネイルについての詳細設定
・scroll…スクロールについての詳細設定
・auto…自動スクロールについての詳細設定
・prev…prevボタンの動作についての詳細設定
・next…nextボタンの動作についての詳細設定
・pagination…ページ表示についての詳細設定
・swipe…スワイプ処理についての詳細設定
・mousewheel…マウスホイールについての詳細設定

解説

再生/停止ボタンの設置(1)

カルーセルの動きを一時停止させたり、再開させるボタンを設置することができます。サンプル（fred4/01.html）を開いてbody内にid属性testのbutton要素が追加されていることを確認してください。

<button id="test">click</button>

jQueryは以下の様に記述され、autoプロパティにobjectオブジェクトが追加されています。objectオブジェクトで設定されているbuttonプロパティにセレクタを設定すると、その要素を再生/停止ボタンにすることができます。サンプルでは追加したbutton要素（id属性test）を指定しました。

var carouObj = new Object();
carouObj.auto = {button:"#test"};
$("ul").carouFredSel(carouObj);

結果としてbuttonをクリックするとカルーセルが停止し、再度クリックすると再開します。しかしスライドする間隔が長いため再生/停止状態が確認しにくいです。ですので、スライドする間隔を短くします。

スライドする間隔はニュースティッカーの作成で説明したようにautoプロパティに直接ミリ秒を設定しますが、今回はbuttonプロパティに利用してしまっています。しかしcarouFredSelプラグインはこの様な場合にも対応できます。サンプル（fred4/01b.html）を開いてjQueryが以下の様に変更されていることを確認して下さい。

carouObj.auto = {
	timeoutDuration:1000,
	button:"#test"
};

autpプロパティに設定するobjectオブジェクトのtimeoutDurationプロパティにミリ秒を設定することで、直接autoプロパティに設定するのと同じようにスライドする間隔を設定できます。これで1秒おきにスライドするようになるので、再生/停止の状態を確認しやすくなると思います。

このようにボタンの設置は簡単にできるのですがボタンの文字までは変更してくれません。ですので、その部分は自作しましょう。

再生/停止ボタンの設置(2)

カルーセルの状態に合わせてボタンのテキストを変更します。サンプル（fred4/02.html）を開いてbody内の構成はfred4/01.htmlから変更がないことを確認して下さい。

jQueryは色々変更しているのですが、まずは最初に追加されている変数pauseStatus（1行目）を確認して下さい。この変数にカルーセルの状態（再生はtrue/停止はfalse）を記憶させておきます。

続いてautoプロパティに設定したObjectオブジェクトにplayプロパティが追加されていることを確認して下さい（4行目）。playプロパティにfalseを設定すると最初は停止状態となりtrueを設定すると最初は再生状態となります。つまり前回紹介したautoプロパティに直接false/trueを設定した時と同じ機能になります。

var pauseStatus = true;
var carouObj = new Object();
carouObj.auto = {
	play:pauseStatus,
	timeoutDuration:1000,
	button:"#test"
};
$("ul").carouFredSel(carouObj);

この処理によって最初に設定した変数pauseStatusの値によってカルーセルの再生状態が決定されます（サンプルではpauseStatusをtrueに設定しているので再生状態になります）。

続いてbutton要素の処理を確認します。以前であればtoggleイベントを利用するのですが、これはjQuery ver1.9で廃止されたためclickイベントで作成しなければなりません。

$("#test").click(function(){
	if (pauseStatus){
		pauseStatus = false;
		$("#test").text("play");
	}else{
		pauseStatus = true;
		$("#test").text("pause");				
	}
})

上記の処理では、ボタンがクリックされたら変数pauseStatusの値（true/false）を確認（2行目）して、true（つまり再生状態）だったらpauseStatusをfalseに変更（3行目）して、ボタンのテキストを「play」に変更（4行目）します。そうでない場合（falseだった場合）はpauseStatusをtrueに変更（6行目）して、ボタンのテキストを「pause」に変更（7行目）します。

本家サイトの説明にはなかったのですが、別件でcarouFredSelプラグインのソースを確認していたところ、カルーセルが停止している時にはbuttonプロパティで指定した要素に「pausedクラス」を付加する処理を見つけました。サンプル（fred4/02b.html）を開いてbody内の構成やjQueryに変更がないのを確認して下さい。変更したのはcss設定で以下の設定が追加されています。

.paused{
	border:1px solid #f00;
}

結果として、pauseボタンをクリックしてカルーセルを停止するとボタンにpausedクラスが付加され赤いボーダーが表示されます。これは少し便利かもしれません。これで再生/停止ボタンの設置は完了です。

プログレスバーの設置(1)

carouFredSelではサムネイルが切り替わるタイミングのプログレスバーを設置できます。
サンプル（fred4/03.html）を開いてbody内にid属性がbarのdiv要素が追加されているのを確認して下さい。まずはプログレスバーではなく%を表示します。

<div id="bar"></div>

jQueryは以下の様に記述されています（objectオブジェクトが3つ入れ子になっているので少々分かりにくいです）。autoプロパティに設定したobjectオブジェクト内にprogressプロパティが追加されています。このprogressプロパティはプログレスバーに関する複数のプロパティを持つため、値としてObjectオブジェクトを設定しなければなりません。

progressプロパティ内に設定するのはbarプロパティとupdaterプロパティです。barプロパティの値にセレクタを指定すると、その要素をプログレスバーにすることができます。updaterプロパティにはfunctionを設定し、どのようにプログレスバーを表示するかを決定します（引数で%が渡されるので、これを利用して演出を作成します）。

carouObj.auto = {
	progress:{
		bar:"#bar",
		updater:function(num){
			$(this).text(num+"%");
		}
	}
}

まずbarプロパティには追加したdiv要素（id属性bar）を指定し、updaterプロパティでは受け取った引数（%）をテキストとして表示するfunctionを設定しました。
updaterプロパティのfunction内で利用しているthis（5行目）はbarプロパティで指定した要素になります。

結果としてサムネイルの下にテキストが表示され、100%になるとサムネイルが切り替わります。

プログレスバーの設置(2)

ではプログレスバーを追加します。サンプル（fred4/04.html）を開いてbody内の構成はfred4/03.htmlと変わらないことを確認して下さい。しかしcssは以下の設定が追加されています。これでプログレスバーのデザインを決めています。サンプルでは幅480px,高さ2px,背景色がオレンジとなっています。

#bar{
	width:480px;
	height:2px;
	background-color:#F63;
}

jQueryはほとんどfred4/03.htmlと同じなのですが、updaterプロパティに設定したfunction内の処理が異なります。以下の様にwidthメソッドを利用してdiv要素の幅を%で設定しています。

progress:{
	bar:"#bar",
	updater:function(num){
		$(this).width(num+"%");
	}
}

結果として、サムネイルの下にプログレスバーが表示されるようになります。しかしプログレスバーの描画が少しカクついた感じなので、最後にこれを修正します。

サンプル（fred4/04b.html）を開いてjQueryが以下の様に変更されているのを確認して下さい。progressプロパティのobjectオブジェクト内にintervalプロパティが追加されています。

progress:{
	bar:"#bar",
	interval:10,
	updater:function(num){
		$(this).width(num+"%");
	}	
}

このプロパティはプログレスバーの描画間隔を設定するもので、デフォルトでは50（50ミリ秒に1回描画、つまり20fps）となっています。サンプルでは10と設定したので、5倍の100fpsとなります。デフォルトの20fpsでも充分だと思うのですが、カクツキが気になる場合は設定してみて下さい。ただし低スペックのPCでは設定してもカクつくと思います。

メモ

コールバックの設定ではありませんでした...

再生/停止のボタンを設定するbuttonプロパティにはfunctionが設定できるので、コールバック（ボタンがクリックされた時に実行される）が設定できるのかと思ったのですが、私の勘違いでした...。コールバックを設定できれば再生/停止ボタンをもう少しシンプルにできるのですが...。

functionは単純にreturnで返した値を再生/停止ボタンに設定するだけのものでした。
サンプル（fred4/test01.html）を開いて以下の様にbuttonプロパティにfunctionが設定されていることを確認して下さい。functionは単純にセレクタ（id属性がtestの要素）を返しているだけです。

var carouObj = new Object();
carouObj.auto = {
	button:function(){
		return "#test"
	}
};
$("ul").carouFredSel(carouObj);

結果として、id属性がtestの要素が再生停止ボタンになります。この様な仕組みは、状況に応じて再生/停止ボタンを変更する時に役立つハズなのですが、そのケースは少ないような気もします。

再生/停止ボタンとプログレスバー

再生/停止ボタンとプログレスバーを両方設置したサンプルを作成しました。サンプルfred4/test02.html）を開いて、問題なく機能することを確認して下さい。

「pause」ボタンをクリックするとプログレスバーはすぐに停止しますが、再開のため「play」ボタンをクリックするとプログレスバーは最初からになります。これは仕様で変更はできないようです。

次回はサムネイルをスライドで切り替えるのではなく、他の演出で切り替えるようにします。

次のページ：carouFredSel(5)