• TOP
• 使い方
• サンプル
• プラグイン
• リファレンス
• 使用例

索引

• └ プラグイン目次

1章：小ネタ系

• ├ イージングの追加
• ├ 要素のセンタリング
• ├ クッキーの操作
• ├ マウスホイール
• ├ スクロールバー(1)
• ├ スクロールバー(2)
• ├ スクロールバー(3)
• ├ スクロールバー(おまけ)
• └ アニメの一時停止/再開

2章：ショーケース系

• ├ Nivo Slider(1)
• ├ Nivo Slider(2)
• ├ Nivo Slider(3)
• └ Nivo Sliderの改造

3章：カルーセル系

• ├ carouFredSel(1)
• ├ carouFredSel(2)
• ├ carouFredSel(3)
• ├ carouFredSel(4)
• ├ carouFredSel(5)
• ├ スマホでカルーセル(1)
• ├ スマホでカルーセル(2)
• ├ カルーセルとnivo(1)
• ├ カルーセルとnivo(2)
• ├ カルーセルとnivo(3)
• └ カルーセルとnivo(4)

Nivo Sliderの改造

概要と組み込み

「nivo slider」を外部からコントロールできるようにjavaScriptの改造を試みました。あまり高度な修正はできないので、なるべくシンプルな改造で対応しています。

解説

外部から特定の画像に切り替える(1)

「nivo slider」では画像切替の演出中にナビをクリックしてもキャンセルされる仕様になっています。これは連続した画像切替をすると演出が崩れるためです。このように色々と内部的な事情があるようなので、外部から直接画像切替の機能を呼び出すよりもtriggerイベントを利用して、ナビのボタンを外部からクリックしたほうが良いでしょう。

しかし「nivo slider」のナビゲーションはidではなくrel属性を利用しており、このままでは少し扱いにくいのでナビにidを付けるように変更しました。サンプル（nivo4/01.html）を開いてjavaScriptのリンクが以下のように変更されていることを確認して下さい。オリジナルのファイルを変更するわけにはいかないので、別途「jquery.nivo01.js」と名前を変更して修正しました。

<script type="text/javascript" src="jquery.nivo01.js"></script>

変更箇所は155〜156行の以下の部分です。上段のコメント部分がオリジナルで下段が変更部分です。赤字のようにナビに「nivoNavi+数字」というid名を追加するように変更しました。

//vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
vars.controlNavEl.append('<a class="nivo-control" id="nivoNavi'+ i +'" rel="'+ i +'">'+ (i + 1) +'</a>');

これでtriggerイベントを利用してクリックしやすくなります。続いてbody内に以下の様にbutton要素が追加されていることを確認して下さい。このボタンをクリックしたら画像を切り替えるようにします。

<button>test</button>

jQueryは以下の様に記述しbuttonがクリックされたら、triggerイベントを利用して3番目（番号は0から始まるので、実質4番目）のナビボタンをクリックします。

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

結果として、buttonをクリックすると画像が3番目（実質4番目）の画像に切り替わります。

外部から特定の画像に切り替える(2)

jQueryではセレクタに属性も指定できるため前項のサンプルのように「nivo slider」を変更しなくても対応できます。サンプル（nivo4/01b.html）を開いてjavaScriptのリンクが以下のように元の「jquery.nivo.slider.pack.js」に戻されていることを確認して下さい。

<script type="text/javascript" src="../../../css_js/jquery.nivo.slider.pack.js"></script>

jQueryは以下の様に変更され、nivo-controlクラスでrel属性が3のナビをクリックするようにしました。

$("button").click(function(){
	$(".nivo-control[rel='3']").trigger("click");		
})

結果としてnivo4/01.htmlと同じように、buttonをクリックすると3番目の画像に切り替わります。

ここまでのサンプルは指定した画像に切り替わることを確認するため、オリジナルのナビを残していましたが、別のナビに差し換えるために消しておきましょう。ナビの消去はnivoSliderメソッドのオプション「controlNav」を利用してはいけません。これをfalseにしてナビを消すと、ナビ自体が生成されずtoggleイベントを利用してクリックすることができなくなってしまいます。

ですのでテーマのcssを変更してナビを表示しないようにします。サンプル（nivo4/02.html）を開いてcssのリンクが以下のように変更されていることを確認して下さい。

<link href="thumb02.css" rel="stylesheet" type="text/css" />

このcssファイルで変更した点は、以下のナビに関する3項目です。ナビを表示しないのでdisplayでnoneを設定し、他の設定をすべて削除しました。

.theme-default .nivo-controlNav {
	display:none;
}
.theme-default .nivo-controlNav a {
}
.theme-default .nivo-controlNav a.active {
}

結果としてナビは表示されなくなります。これで別途作成するナビを追加できます。

コールバックの変更

別途ナビを追加するには、もう少し「nivo slider」を改造する必要があります。外部から操作するだけではなく、画像を切り替えた際に何番目の画像に切り替えたかを報告するようにします。

「nivo slider」には「beforeChange」や「afterChange」のコールバックがあるので、この部分を変更し、引数で現在のスライド番号を送るようにします。jquery.nivo01.jsの207〜209行目が以下の様に記述されていることを確認して下さい。

// Trigger the afterChange callback
//settings.afterChange.call(this);
settings.afterChange.call(this, vars.currentSlide);

208行目がオリジナルで209行目が変更した処理です。javaScriptのcallメソッドの第2引数に設定した情報は引数として渡されるようになるので、これでコールバックのafterChangeの引数経由で現在のスライドの番号が取得できます。同じようにしてbeforeChangeのコールバックも修正しました。

// Trigger the beforeChange callback
//settings.beforeChange.call(this);
settings.beforeChange.call(this, vars.currentSlide);

では本当に引数でスライド番号が取得できるか確認しましょう。サンプル（nivo4/03.html）を開いてjQueryに以下の処理が追加されていることを確認して下さい。

var nivoObj = new Object();
nivoObj.afterChange = function(i){
	alert(i)
}
$('#slider').nivoSlider(nivoObj);

afterChangeのコールバックで設定したfunctionで引数iを受け取りアラートで表示するようにしました。結果として画像が切り替わるとスライド番号がアラートで表示されます。これで画像が切り替わった際に追加したナビの現在位置表示も切り替えることができます。

ナビを追加

ではナビを追加したサンプルを紹介します。サンプル（nivo4/04.html）を開いてbody内に以下の様にサムネイルの画像が追加されているのを確認して下さい。

<div id="navi">
	<img id="thumb_0" width="50" height="50" src="../images/page1_thumb.jpg">
	<img id="thumb_1" width="50" height="50" src="../images/page2_thumb.jpg">
	<img id="thumb_2" width="50" height="50" src="../images/page3_thumb.jpg">
	<img id="thumb_3" width="50" height="50" src="../images/page4_thumb.jpg">
</div>

ナビに関するcssは以下の様に設定しました。:hoverの設定もしているので、ナビの画像にマウスオーバーするとサムネイルに赤枠が表示されます。

#navi{
	width:640px;
	text-align: center;
	padding: 10px 0;
}
#navi img{
	cursor:pointer;
	margin:10px;
	border:solid 1px #fff;
	-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
	-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
	box-shadow: 0px 1px 5px 0px #4a4a4a;
}
#navi img:hover {
	border:solid 1px #f00;
}

次にjQueryを確認して以下の処理が追加されていることを確認して下さい。id属性navi内の画像（つまりサムネイル）がクリックされると、そのid属性の値から数値部分を取り出し、その情報を基にtoggleイベントを利用して本物のナビをクリックするようにしています。

2行目で利用しているthis.idとsplitのテクニックはサンプルページ：タブメニュー(2)で紹介しています。

$("#navi>img").click(function(){
	var myID = this.id.split("_")[1];
	$("#nivoNavi"+myID).trigger("click");
})

結果として、追加したサムネイルをクリックすると画像が切り替わります。あとは現在表示している画像のサムネイルを変更するようにします。

サムネイルのハイライト

次は表示している画像に合わせてサムネイルをハイライトします。サンプル（nivo4/05.html）を開いてbody内の構成とcssはnivo4/04.htmlから変更がないことを確認して下さい。

jQueryは少々難しいかもしれません。まず以下の部分で最初のサムネイル以外の透明度を0.3に変更しています。セレクタには>（子要素）と:not()と:firstを利用し、メソッドにはfadeToメソッドを利用しました。

$("#navi>img:not(:first)").fadeTo(1,0.3);

サムネイルを切り替えるテクニックはサンプルページ：選択肢の作成(2)のテクニックを利用しています（このテクニックは当サイトで最も難易度が高いものの1つです）。以下の部分がそれで4、行目で古いサムネイルの透明度を0.3にして、4行目で新しいサムネイルの透明度を1.0にしています。6行目でハイライトされたサムネイルの番号を変数slideIDに記憶させるのを忘れないで下さい。

var slideID = 0;
var nivoObj = new Object();
nivoObj.afterChange = function(i){
	$("#thumb_" + slideID).fadeTo(300, 0.3);
	$("#thumb_" + i).fadeTo(300, 1.0);
	slideID = i;
}

上記の処理は「nivo slider」のコールバックであるafterChangeで設定されているため、画像が切り替わってからサムネイルを切り替えます。

マウスオーバーで停止

最後にサムネイルにマウスオーバーしている間は画像を切り替えないようにします。「nivo slider」は画像にマウスオーバーしているときは停止しますが、ナビにマウスオーバーしている時は停止しません。ナビにマウスオーバーしたときも停止させた方が仕様としては正しい気がします。

この処理は前項の仕組みに比べると簡単です。サンプル（nivo4/06.html）を開いてbody内の構成とcssはnivo4/05.htmlから変更がないことを確認して下さい。jQueryは以下の処理が追加されています。

$("#navi").mouseenter(function(){
	$('#slider').data('nivoslider').stop();
})
$("#navi").mouseleave(function(){
	$('#slider').data('nivoslider').start();
})

これでナビにマウスオーバーしたら「nivo slider」が停止し、マウスアウトしたら再開するようになります。

メモ

画像が切り替わる前にサムネイルを切り替える

これまで紹介したサンプルでは画像が切り替わってからサムネイルを切り替えましたが、画像の切替と同じタイミングでサムネイルを切り替える場合はどうしたら良いのでしょうか？。すこし複雑になるのですがコールバックのbeforeChangeを利用して作成することが可能です。

サンプル（nivo4/test01.html）を開いてbody内の構成とcssはnivo4/06.htmlから変更がないことを確認して下さい。jQueryは以下のように変更されています。nivo4/06.htmlとの違いが分かりにくいかもしれませんが、画像が切り替わる演出と同じタイミングでサムネイルのハイライトも切り替わる点が異なります。

nivoObj.beforeChange = function(i){
	var nextSlide = i+1;
	if (nextSlide >= 4) nextSlide = 0; 
	$("#thumb_" + slideID).fadeTo(1000, 0.3);
	$("#thumb_" + nextSlide).fadeTo(1000, 1.0);
	slideID = nextSlide;
}

まず1行目でafterChangeの代わりにbeforeChangeを利用しています。引数iで画像のidが送られてきますが、画像が切り替わる前なので1足さないといけません。ですので2行目で変数nextSlideに1足した値を代入します。

3行目の処理は1足した値が最後の画像IDを越えた場合、最初（0）に戻す処理です。あとは5行目と6行目で変数iの代わりに変数nextSlideを利用するだけです。これで「nivo slider」の説明は終わりです。次章ではnivo sliderを開発した会社が作成したカルーセルのプラグイン「carouFredSel」を紹介します。

次のページ：3章 carouFredSel(1)

このサイトについて