初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：小ネタ系
2章：ショーケース系
3章：カルーセル系

カルーセルとnivo(4)

概要

Nivo sliderは非常に複雑な処理で演出を実現しているため連打に対応していません。そのため連打された場合は処理を無視し、結果として前回最後に説明した問題（carouFredSelを連続的に操作するとサムネイルとnivoの画像がずれる問題）につながります。

nivo sliderを連打対応させるような改造は私には無理と判断したので、今回はnivo sliderの演出中はcarouFredSelの処理も無視する方法で問題を回避したいと思います。

解説

操作をロックするタイミング

nivo sliderが演出中はcarouFredSelの操作をロックするようにします。まずはロックのタイミングを確認しましょう。サンプル（fred11/01.html）を開いてnivo sliderの処理が以下の様に変更されているのを確認して下さい。 

//コールバックの追加
nivoObj.beforeChange = function(){
	$("#debug").text("LOCK")
}
nivoObj.afterChange = function(){
	$("#debug").text("")
}

beforeChangeプロパティに設定した処理は、演出を開始する前に実行されます。またafterChangeプロパティに設定した処理は、演出が完了した後で実行されます。

このサンプルではロックのタイミングを確認するだけなのでtextメソッドを利用してdebugクラスの要素に「LOCK」と表示したり、消したりするだけにしています。表示するdebugクラスの要素はbody内の最後の部分に以下の様に設定されています。 

<div id="debug"></div>

つまりこの処理によって、nivoの演出を開始する前に「LOCK」と表示して、nivoの演出が完了すると「LOCK」の表示を削除します。このタイミングでcarouFredSelをロックするわけです。

フラグの設定

今回はcarouFredSelのロックにフラグを利用します。サンプル（fred11/02.html）を開いてnivo sliderのコールバックの処理が以下の様に変更されているのを確認して下さい。 

nivoObj.beforeChange = function(){
	nivo_lock_flg = true;//---フラグの設定
	$("#debug").text("LOCK")
}
nivoObj.afterChange = function(){
	nivo_lock_flg = false;//---フラグの設定
	$("#debug").text("unlock")
}

ロックするタイミングでフラグ「nivo_lock_flg」をtureに設定し、ロックを解除するタイミングでフラグ「nivo_lock_flg」をfalseにしています。

またjQueryの最初の部分にフラグ「nivo_lock_flg」が作成されていることも確認して下さい。最初はロックされていないので値としてfalseを設定しておきます。 

//フラグの追加（最初は非ロック状態）
var nivo_lock_flg = false;

これでcarouFredSelをロックする準備が整いました。つまりフラグ「nivo_lock_flg」がtrueの時にはcarouFredSelの操作を無視する様にし、falseの時だけ処理するようにします。

サムネイルのロック

carouFredSelの処理はサムネイルをクリックした時と、next/prevボタンをクリックした時の2つがあります。サムネイルをロックする処理の方が簡単なので先に説明します。

サンプル（fred11/03.html）を開いてサムネイルをクリックする部分の処理（jQueryの最後）に以下の様なif文が追加されていることを確認して下さい。既存の処理（4,5行目）に変更はありません。 

$("ul").on("click", "li", function(){
	//---フラグがfalseの時だけ処理する
	if (nivo_lock_flg == false){
		var myID = Number(this.id.split("_")[1]) -3;
		$(".carouPage>a").eq(myID).trigger("click");
	}
});

このif文でフラグ「nivo_lock_flg」がfalseの時にしか、サムネイルをクリックした時の処理を実行しないようにしています。結果として、サムネイルを色々連打してもnivo sliderの演出中は処理が無視されるため、サムネイルとnivoの画像がずれる問題は発生しなくなります。

next/prevボタンのロック

next/prevボタンはcarouFredSel内で処理が実行されているため、サムネイルのようにはロックできません。そこでダミーのnext/prevボタンを用意して、それを中継するようにします。

サンプル（fred11/04.html）を開いてbody内にnext2/prev2ボタンが追加されていることを確認して下さい。この追加したボタンを本当のボタンとして、これまでのボタンをダミーとします。 

<div class="carouPrev2">prev</div>
<div class="carouNext2">next</div>

この追加したものをcarouFredSelのボタンとして利用します。ですのでjQueryのnext/prevボタン設定が以下の様に変更されているのを確認して下さい。 

//---追加した要素に変更
carouObj.prev = ".carouPrev2";
carouObj.next = ".carouNext2";

この変更のため、既存のnext/prevボタンをクリックしても機能しません。そして追加したボタン（nextやprevといった文字だけ）をクリックすると機能します。

これで下準備が完成です。あとは既存のボタンをクリックした際にフラグ「nivo_lock_flg」がfalseの時だけtriggerメソッドを利用してnext2/prev2ボタンをクリックするようにします。

サンプル（fred11/05.html）を開いてjQueryの最後に以下の処理が追加されていることを確認して下さい。 

$(".carouNext").click(function(){
	if (nivo_lock_flg == false){
		$(".carouNext2").trigger("click");
	}
});
$(".carouPrev").click(function(){
	if (nivo_lock_flg == false){
		$(".carouPrev2").trigger("click");
	}
});

1行目では既存のnextボタンのクリック時の処理を設定しています。主な内容は3行目でtriggerメソッドを利用して本当のnextボタン（carouNext2）をクリックすることなのですが、ここでサムネイルのロックで利用したif文のテクニックを追加しています。そのためnivoの演出中には処理が無視されるわけです。6行目からのprevボタンの処理も同じ考え方で作成されています。

実際に既存のnext/prevボタン（文字ではない方のボタン）を連打して下さい。前回までのサンプルと異なり、サムネイルとnivoの画像はずれないはずです。

あとは確認用の仕組みを削除して完成です。サンプル（fred11/06.html）を開いてbody内の最後に追加されていたid属性がdebugの要素が削除されていることを確認して下さい。また追加したnext2/prev2ボタンは以下の様にテキストを削除して表示しないようにしました。 

<div class="carouPrev2"></div>
<div class="carouNext2"></div>

そしてjQueryではnivo sliderの設定でid属性がdebugの要素に「LOCK」と表示する部分を削除して、以下の様にフラグの設定だけにしました。 

//---確認用のtextを削除
nivoObj.beforeChange = function(){
	nivo_lock_flg = true;
}
nivoObj.afterChange = function(){
	nivo_lock_flg = false;
}

これでcarouFredSelを連打した時にサムネイルと画像がずれる問題を解決できました。

メモ

carouFredSelも演出中は処理を無視しています

nivo sloderだけでなくcarouFredSelも演出中は処理を無視するようになっています。しかし演出が「短時間の移動」だけなので気が付かないだけです。

nivo sliderは演出が複雑なので処理を無視しないようにする設定はないのですが、carouFredSelは演出がシンプルなので処理を無視しないように設定できます。利用することはないと思いますが紹介します。

サンプル（fred11/test01.html）を開いてソースを確認して下さい。これはカルーセルとnivo(2)で最後に完成させたfred09/04.htmlとほとんど同じなのですが、jQueryに以下の処理が追加されています。 

carouObj.scroll ={
	items:1,
	queue:true,//-------------------新規追加
	onBefore:function(data){
		$(data.items.old[3]).removeClass("nowCenter");
	},
	onAfter:function (data){
		$(data.items.visible[3]).addClass("nowCenter");
	}
}

carouFredSelのscrollプロパティ内にあるqueueプロパティをtrueに設定すると、演出中の処理を無視しないでアニメのキューに追加するようになります。

実際にサンプル（fred11/test01.html）でnextボタンを連打してみてください、クリックした回数と同じだけ律儀に移動するはずです。そのためボタンの連打を停止してもしばらく演出が続くこととなり、利用者は「壊れた」と勘違いしがちです。そのためqueueプロパティはデフォルトでfalseとなっています。

これでcarouFredSelの説明は全て完了となります。