デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:小ネタ系
2章:ショーケース系
3章:カルーセル系

Nivo Slider(2)

概要と組み込み

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

構文

nivoSliderメソッドは引数にobjectオブジェクトを設定することで、仕様を変更することができます。

スライドショーの設定返値:jQueryオブジェクト
jQo.nivoSlider( オプション )
※オプションはobjectオブジェクトで設定し、以下のプロパティを利用してスライドショーの詳細を操作します。
※プロパティには以下の種類があります。
effect…画像切替時の演出を変更(解説で詳しく説明)
・slices…画像切替の演出でスライス系を選択した場合のスライス数
・boxCols…画像切替の演出でボックス系を選択した場合の列数
・boxRows…画像切替の演出でボックス系を選択した場合の行数
animSpeed…画像切替の時間(ミリ秒)
pauseTime…画像を表示する時間(ミリ秒)
startSlide…最初に表示する画像(0から始まるインデックス番号)
directionNav…next/backを表示するか否か(true/false)
controlNav…ページナビを表示するか否か(true/false)
controlNavThumbs…ページナビにサムネイルを使うか否か(true/false)
pauseOnHover…画像にマウスオーバーしている間は画像を切り替えないようにするか否か(true/false)
manualAdvance…自動的に切り替えるのをやめるか否か(true/false)
・prevText…(テーマを利用していない時やテーマbarなどで)prevの代わりに表示したい文字を設定
・nextText…(テーマを利用していない時やテーマbarなどで)nextの代わりに表示したい文字を設定
・randomStart…開始画像をランダムにするか否か(true/false)
beforeChange…スライドを切り替える直前に実行したいfunctionを設定
afterChange…スライドを切り替えた直後に実行したいfunctionを設定
slideshowEnd…すべての画像を表示したら実行したいfunctionを設定
lastSlide…最後のスライドを表示したら実行したいfunctionを設定
afterLoad…画像の読み込みが完了した時に実行したいfunctionを設定

解説

演出の変更

デフォルトでは画像の切替はランダムですが、effectプロパティに値を設定することで演出を固定することができます。設定できる値は以下の通りです。

effectプロパティに設定できる値
sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDownLeft、fold、fade、random、slideInRight、slideInLeft、boxRandom、boxRain、boxRainReverse、boxRainGrow、boxRainGrowReverse

サンプル(nivo2/01.html)を開いてbody内の構成は前回のサンプル(nivo1/03.html)と同じ事を確認して下さい。jQueryは変更され、以下の様にobjectオブジェクト「nivoObj」が作成されnivoSliderメソッドに引数として渡されています。

var nivoObj = new Object();
nivoObj.effect = "fade";
$('#slider').nivoSlider(nivoObj);

作成したnivoObjには2行目でeffectプロパティが作成され、値として「fade」を代入しています。結果として画像が切り替わる演出がフェードに固定されます。effectプロパティの値は前述の表に書いたように沢山あるので、いろいろと試してみましょう。

自動的に切り替えるのをやめる

設定できる仕様は「構文」に説明したとおりですが、分かりにくいものもいくつかあるので、ここで説明しておきたいと思います。まずは「manualAdvance」についてです。この設定を「true」に設定すると、自動的に画像が切り替わらなくなります。文章量が多いコンテンツなどはユーザーによって読み終わる時間差が大きいので、そのような時に利用すると良いのでしょう。

サンプル(nivo2/02.html)を開いてbody内の構成はnivo2/01.htmlと同じ事を確認してください。jQueryは以下のように変更されています。

nivoObj = new Object();
nivoObj.manualAdvance = true;
$('#slider').nivoSlider(nivoObj);

結果としてユーザーがナビゲーションを操作しない限り画像が切り替わらなくなります。

マウスオーバーで停止するのをやめる

「nivo slider」ではマウスカーソルが画像やナビゲーションに重なっている時は画像の切替をしません。これはユーザーが画像の記事などを読んでいると想定しての仕様です。しかし、この仕様をOFFにすることもできます。

サンプル(nivo2/03.html)を開いてbody内の構成はnivo2/01.htmlと同じ事を確認してください。jQueryは以下のように変更され、2行目でpauseOnHoverプロパティにfalseを設定しています。

var nivoObj = new Object();
nivoObj.pauseOnHover = false;
$('#slider').nivoSlider(nivoObj);

結果として、画像にマウスカーソルを重ねても停止せず画像が切り替わります。

PREV/NEXTの文字を変更する

前回紹介したサンプル(nivo1/02b.html)のように、テーマに「bar」を利用した場合は画像にマウスオーバーするとインターフェイスが表示されます。このとき表示される「PREV/NEXT」の文字を変更することができます。

サンプル(nivo2/04.html)を開いてbody内の構成はnivo1/02b.htmlと同じ事を確認してください。jQueryは以下の様に変更され、prevTextプロパティとnextTextプロパティに表示したい文字を設定しています。

var nivoObj = new Object();
nivoObj.prevText = "前へ";
nivoObj.nextText = "次へ";
$('#slider').nivoSlider(nivoObj);

結果として、インターフェイスに「前へ」「次へ」と表示されるようになります。

コールバックの設定

「構文」で紹介したオプションで「beforeChange」〜「afterLoad」は特定のイベントが発生した時に実行したいfunctionを設定します。サンプル(nivo2/05.html)を開いてbody内の構成はnivo2/01.htmlと同じ事を確認してください。jQueryは以下のように変更されています。

var nivoObj = new Object();
nivoObj.lastSlide = function(){
	alert("最後のスライドが終わりました")
};
$('#slider').nivoSlider(nivoObj);

結果として最後の画像の表示が終わる時にアラートで「最後のスライドが終わりました」と表示されます。

画像切替の停止

画像切替を停止/再開するニーズはあると思うのですが、本家ページdocumentationの「jQuery Plugin Usage」には見当たりませんでした。ですが別の所にありました本家ページdocumentationの「FAQ」に...。

画像切替の停止/再開は「nivo slider」を設定した要素に対しdataメソッドを利用してnivoslider本体を取得し、これに対してstopメソッドやplayメソッドを実行します。

スライドショーの停止/再開
$(セレクタ).data('nivoslider').stop();//---停止
$(セレクタ).data('nivoslider').start();//---再開

サンプル(nivo2/06.html)を開いてjQueryが以下の様に変更されているのを確認して下さい。前項で利用したコールバックの「lastSlide」を利用して、最後のスライドの表示が完了したら画像切替を停止します。

var nivoObj = new Object();
nivoObj.lastSlide = function(){
	$('#slider').data('nivoslider').stop();
};
$('#slider').nivoSlider(nivoObj);

結果として、最後の画像で切替が停止され自動的に画像が切り替わらなくなります(インターフェイスは機能します)。

メモ

途中でオプションの内容を変更できないのか?

サンプルnivo2/06.htmlで紹介した画像切替の停止方法が最初わからなかったので、最後の画像が完了したらmanualAdvanceプロパティをtrueにして画像の切替を停止しようと考えたのですが...。無理でした。

サンプル(nivo2/test01.html)を開いてjQueryが以下の様に記述されているのを確認して下さい。lastSlideを利用して最後の画像の表示が完了したら、manualAdvanceプロパティをtrueに設定してnivoSliderメソッドにnivoObjを再設定しています。

var nivoObj = new Object();
nivoObj.lastSlide = function(){
	nivoObj.manualAdvance = true;
	$('#slider').nivoSlider(nivoObj);
};
$('#slider').nivoSlider(nivoObj);

こうすればnivoObjが上書きされて停止すると考えていたのですが、それは無理のようです。途中でオプションの内容を変更することはできないのでしょうか?

lastSlideとslideshowEndの違いって?

コールバックに「lastSlide」と「slideshowEnd」があるのですが違いが分かりません...。「slideshowEnd」は開始画像が0の時は「lastSlide」と同じだけれど、開始画像が違った場合は、開始画像の手前の画像の表示が終わった時に実行されると思っていました(つまり全ての画像の表示が終わった時)。

しかしサンプルを作成して確認すると、開始番号が0でないときも「lastSlide」と「slideshowEnd」は同じタイミングでfunctionが実行されました。サンプル(nivo2/test02.html)を開いてjQueryが以下の様に記述されているのを確認して下さい。

2行目で「startSlide」プロパティを2に設定して3番目の画像から表示するようにしています(0から始まるので2は3番目となります)。コールバックのlastSlideは開始番号に拘わらず、最後の画像の表示が完了したときに実行されます。

var nivoObj = new Object();
nivoObj.startSlide = 2;
nivoObj.lastSlide = function(){
	alert("最後のスライドが終わりました")
};
$('#slider').nivoSlider(nivoObj);

続いてサンプル(nivo2/test02b.html)を開いてjQueryを確認して下さい。以下の様にコールバックを「slideshowEnd」に変更しています。開始番号はnivo2/test02.htmlと同じように2を設定しています。

var nivoObj = new Object();
nivoObj.startSlide = 2;
nivoObj.slideshowEnd = function(){
	alert("すべてのスライドの表示が完了しました")
};
$('#slider').nivoSlider(nivoObj);

しかし結果はnivo2/test02.htmlと同じで最後(4番目)の画像の表示が終わった時にアラートが表示されます。「slideshowEnd」は本家のページで「Triggers after all slides have been shown」と説明されているので、2番目から開始したら1周まわって1番目の画像が終わった時にfunctionを実行しなくてはいけないような気がします...。バグなのでしょうか?それとも私の勘違いなのでしょうか?

次回はナビゲーションにサムネイルを設定する方法を説明したいと思います。