Slider」は色々なオプションを選択することができます。Sliderについて説明していきます。構文nivoSliderメソッドは引数にobjectオブジェクトを設定することで、仕様を変更することができます。)※オプションはobjectオブジェクトで設定し、以下のプロパティを利用してスライドショーの詳細を操作します。※プロパティには以下の種類があります。演出の変更デフォルトでは画像の切替はランダムですが、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メソッドに引数として渡されています。"fade";$('#slider').nivoSlider(nivoObj);作成したnivoObjには2行目でeffectプロパティが作成され、値として「fade」を代入しています。結果として画像が切り替わる演出がフェードに固定されます。effectプロパティの値は前述の表に書いたように沢山あるので、いろいろと試してみましょう。自動的に切り替えるのをやめる設定できる仕様は「構文」に説明したとおりですが、分かりにくいものもいくつかあるので、ここで説明しておきたいと思います。「manualAdvance」についてです。この設定を「true」に設定すると、自動的に画像が切り替わらなくなります。文章量が多いコンテンツなどはユーザーによって読み終わる時間差が大きいので、そのような時に利用すると良いのでしょう。サンプル(nivo2/02.html)を開いてbody内の構成はnivo2/01.htmlと同じ事を確認してください。jQueryは以下のように変更されています。true;$('#slider').nivoSlider(nivoObj);結果としてユーザーがナビゲーションを操作しない限り画像が切り替わらなくなります。slider」ではマウスカーソルが画像やナビゲーションに重なっている時は画像の切替をしません。これはユーザーが画像の記事などを読んでいると想定しての仕様です。この仕様をOFFにすることもできます。サンプル(nivo2/03.html)を開いてbody内の構成はnivo2/01.htmlと同じ事を確認してください。jQueryは以下のように変更され、2行目でpauseOnHoverプロパティにfalseを設定しています。false;$('#slider').nivoSlider(nivoObj);結果として、画像にマウスカーソルを重ねても停止せず画像が切り替わります。PREV/NEXTの文字を変更する前回紹介したサンプル(nivo1/02b.html)のように、テーマに「bar」を利用した場合は画像にマウスオーバーするとインターフェイスが表示されます。このとき表示される「PREV/NEXT」の文字を変更することができます。サンプル(nivo2/04.html)を開いてbody内の構成はnivo1/02b.htmlと同じ事を確認してください。jQueryは以下の様に変更され、prevTextプロパティとnextTextプロパティに表示したい文字を設定しています。"次へ";$('#slider').nivoSlider(nivoObj);結果として、インターフェイスに「前へ」「次へ」と表示されるようになります。「構文」で紹介したオプションで「beforeChange」〜「afterLoad」は特定のイベントが発生した時に実行したいfunctionを設定します。サンプル(nivo2/05.html)を開いてbody内の構成はnivo2/01.htmlと同じ事を確認してください。jQueryは以下のように変更されています。function(){alert("最後のスライドが終わりました")};$('#slider').nivoSlider(nivoObj);結果として最後の画像の表示が終わる時にアラートで「最後のスライドが終わりました」と表示されます。Usage」には見当たりませんでした。別の所にありました本家ページdocumentationの「FAQ」に...。dataメソッドを利用してnivoslider本体を取得し、これに対してstopメソッドやplayメソッドを実行します。スライドショーの停止/再開$(セレクタ).data('nivoslider').stop();//---停止$(セレクタ).data('nivoslider').start();//---再開サンプル(nivo2/06.html)を開いてjQueryが以下の様に変更されているのを確認して下さい。前項で利用したコールバックの「lastSlide」を利用して、最後のスライドの表示が完了したら画像切替を停止します。function(){$('#slider').data('nivoslider').stop();};$('#slider').nivoSlider(nivoObj);結果として、最後の画像で切替が停止され自動的に画像が切り替わらなくなります(インターフェイスは機能します)。メモ途中でオプションの内容を変更できないのか?サンプルnivo2/06.htmlで紹介した画像切替の停止方法が最初わからなかったので、最後の画像が完了したらmanualAdvanceプロパティをtrueにして画像の切替を停止しようと考えたのですが...。サンプル(nivo2/test01.html)を開いてjQueryが以下の様に記述されているのを確認して下さい。lastSlideを利用して最後の画像の表示が完了したら、manualAdvanceプロパティをtrueに設定してnivoSliderメソッドにnivoObjを再設定しています。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は開始番号に拘わらず、最後の画像の表示が完了したときに実行されます。function(){alert("最後のスライドが終わりました")};$('#slider').nivoSlider(nivoObj);続いてサンプル(nivo2/test02b.html)を開いてjQueryを確認して下さい。以下の様にコールバックを「slideshowEnd」に変更しています。開始番号はnivo2/test02.htmlと同じように2を設定しています。function(){alert("すべてのスライドの表示が完了しました")};$('#slider').nivoSlider(nivoObj);しかし結果はnivo2/test02.htmlと同じで最後(4番目)の画像の表示が終わった時にアラートが表示されます。shown」と説明されているので、2番目から開始したら1周まわって1番目の画像が終わった時にfunctionを実行しなくてはいけないような気がします...。バグなのでしょうか?それとも私の勘違いなのでしょうか?次回はナビゲーションにサムネイルを設定する方法を説明したいと思います。