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

カルーセルとnivo(2)

概要

前回に引き続きcarouFredSelのサムネイルからnivo sliderを操作できるようにします。carouFredSelのjavaScriptファイルを改造せずに実現することができました。

解説

サムネイルをクリックして切り替える(1)

nivo sliderと組みあわせるためにはcarouFredSelのサムネイルをクリックしたら、そのサムネイルが中央に移動するようにした方がよいでしょう。carouFredSelのオプションには、特定のサムネイル位置に移動するような処理はないようなので、ページボタンを利用して対応します。

サンプル（fred9/01.html）を開いてbody内の構成を確認して下さい。以下の様にnextボタンの処理の下にページボタン用のdiv要素を追加しました。ページボタンの追加についてはCarouFredSel(3)で説明しているので、忘れてしまった方は確認しておいて下さい。

<div class="carouPrev"></div>
<div class="carouNext"></div>
<div class="carouPage"></div>

これに伴いcssの設定も追加していますが、最終的にページボタンは非表示にするため気にしなくてOKです。

jQueryでは以下の様にpaginationプロパティに上記で追加したcarouPageクラスを指定してページボタンを表示するようにしました。

carouObj.prev = ".carouPrev";
carouObj.next = ".carouNext";
carouObj.pagination = ".carouPage";

結果としてページボタンが表示されますが、前回のサンプルでサムネイルを1つずつ切り替えるようにしたためサムネイル数（つまり26個）のページボタンが表示されます。

実際にページボタンをクリックして特定の位置に移動するか確認して下さい。例えば「1」のボタンは「A」を指しますから、これをクリックすると「A」のサムネイルが左端に移動します。※carouFredSelの基準点は左端のため

サムネイルをクリックして切り替える(2)

続いてはサムネイルをクリックしたら、サムネイルに対応したページボタンをクリックするようにします。このように特定のボタンをプログラム的にクリックするためにはtriggerイベントを利用します。

サンプル（fred9/02.html）を開いてbody内の構成を確認して下さい。以下の様にサムネイルの要素にid属性を追加して、クリックされた際にどのサムネイルがを特定できるようにします。

<li id="t_0"><img src="../images/a.gif" width="50" height="50"></li>
<li id="t_1"><img src="../images/b.gif" width="50" height="50"></li>
<li id="t_2"><img src="../images/c.gif" width="50" height="50"></li>

続いてjQueryを確認して、以下の処理が追加されていることを確認して下さい。ul要素内のli要素がクリックされたら、その要素のidを取得しsplitメソッドを利用して数字部分だけを変数myIDに代入するようにしています。 ※this.idについては使い方：thisについて(2)で説明しています。

$("ul").on("click", "li", function(){
	var myID = this.id.split("_")[1];
	alert(myID);
});

正しくidが取得できているか確認するためにalertを利用してmyIDを表示するようにしたので、実際にサムネイルをクリックして数字が表示されるか確認して下さい。あとはこの数字を基に特定のページボタンをクリックするようにします。

サムネイルをクリックして切り替える(3)

ではアラートで表示するのではなくtriggerイベントでページボタンをクリックするようにします。

サンプル（fred9/03.html）を開いてjQueryのサムネイルをクリックした時の処理が以下の様に変更されていることを確認して下さい。ポイントは3行目です。ページボタン（carouPageクラス内にあるa要素）に対して、トラバースのeqメソッドを使い、変数myIDの番目にある要素をtriggerイベントを利用してクリックしています。

$("ul").on("click", "li", function(){
	var myID = this.id.split("_")[1];
	$(".carouPage>a").eq(myID).trigger("click");
});

結果としてサムネイルをクリックすると、そのサムネイルが左端の位置になるように移動します（例えばAをクリックするとAが左端になる位置に移動します）。これはサムネイルに基準が左端にあるためです。しかし、これでは都合が悪いのでクリックした位置が中央（つまり左端から3番目）になるように変更します。

サンプル（fred9/03b.html）を開いてjQueryのサムネイルをクリックした時の処理が以下の様に変更されていることを確認して下さい。変更したのは2行目です。

$("ul").on("click", "li", function(){
	var myID = Number(this.id.split("_")[1]) -3;
	$(".carouPage>a").eq(myID).trigger("click");
});

クリックされたサムネイルを左端から3番目（つまり中央）にずらして配置するために3引いています。しかし取得したthis.idは文字列なので、Numberメソッドを利用して数値に変換してから引くことに注意して下さい。

3引くと場合によっては結果がマイナスになりますが、トラバースのeqメソッドはマイナスの引数にも対応しており、その場合は後から数えて指定されます（リファレンスに詳しい説明があるので確認して下さい）。

結果として、クリックしたサムネイルが中央になるように移動します。あとはページボタンのcssを修正して表示しないようにします。
triggerでページボタンをクリックする必要があるので削除してはダメです。表示しないようにするだけにしてください。

サンプル（fred9/04.html）を開いてページボタンのcss設定が以下の様に変更されていることを確認して下さい。displayプロパティをnoneにすることで表示しないようにしました。

.carouPage a {
	display:none;
}

結果としてページボタンが表示されなくなりますが、存在はしているのでサムネイルをクリックすると機能することが確認できます。今回はここで終了です。次回はいよいよnivo sliderとの連携になります。

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