slider」を外部からコントロールできるようにjavaScriptの改造を試みました。高度な修正はできないので、なるべくシンプルな改造で対応しています。slider」では画像切替の演出中にナビをクリックしてもキャンセルされる仕様になっています。これは連続した画像切替をすると演出が崩れるためです。triggerイベントを利用して、ナビのボタンを外部からクリックしたほうが良いでしょう。slider」のナビゲーションはidではなくrel属性を利用しており、このままでは少し扱いにくいのでナビにidを付けるように変更しました。サンプル(nivo4/01.html)を開いてjavaScriptのリンクが以下のように変更されていることを確認して下さい。オリジナルのファイルを変更するわけにはいかないので、別途「jquery.nivo01.js」と名前を変更して修正しました。src="jquery.nivo01.js"></script>変更箇所は155〜156行の以下の部分です。上段のコメント部分がオリジナルで下段が変更部分です。赤字のようにナビに「nivoNavi+数字」というid名を追加するように変更しました。+'</a>');これでtriggerイベントを利用してクリックしやすくなります。続いてbody内に以下の様にbutton要素が追加されていることを確認して下さい。このボタンをクリックしたら画像を切り替えるようにします。triggerイベントを利用して3番目(番号は0から始まるので、実質4番目)のナビボタンをクリックします。$("button").click(function(){$("#nivoNavi3").trigger("click");})結果として、buttonをクリックすると画像が3番目(実質4番目)の画像に切り替わります。slider」を変更しなくても対応できます。サンプル(nivo4/01b.html)を開いてjavaScriptのリンクが以下のように元の「jquery.nivo.slider.pack.js」に戻されていることを確認して下さい。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」を利用してはいけません。toggleイベントを利用してクリックすることができなくなってしまいます。テーマのcssを変更してナビを表示しないようにします。サンプル(nivo4/02.html)を開いてcssのリンクが以下のように変更されていることを確認して下さい。/>このcssファイルで変更した点は、以下のナビに関する3項目です。ナビを表示しないのでdisplayでnoneを設定し、他の設定をすべて削除しました。{}結果としてナビは表示されなくなります。これで別途作成するナビを追加できます。slider」を改造する必要があります。外部から操作するだけではなく、画像を切り替えた際に何番目の画像に切り替えたかを報告するようにします。slider」には「beforeChange」や「afterChange」のコールバックがあるので、この部分を変更し、引数で現在のスライド番号を送るようにします。jquery.nivo01.jsの207〜209行目が以下の様に記述されていることを確認して下さい。vars.currentSlide);208行目がオリジナルで209行目が変更した処理です。javaScriptのcallメソッドの第2引数に設定した情報は引数として渡されるようになるので、これでコールバックのafterChangeの引数経由で現在のスライドの番号が取得できます。同じようにしてbeforeChangeのコールバックも修正しました。vars.currentSlide);では本当に引数でスライド番号が取得できるか確認しましょう。サンプル(nivo4/03.html)を開いてjQueryに以下の処理が追加されていることを確認して下さい。function(i){alert(i)}$('#slider').nivoSlider(nivoObj);afterChangeのコールバックで設定したfunctionで引数iを受け取りアラートで表示するようにしました。結果として画像が切り替わるとスライド番号がアラートで表示されます。これで画像が切り替わった際に追加したナビの現在位置表示も切り替えることができます。ナビを追加ではナビを追加したサンプルを紹介します。サンプル(nivo4/04.html)を開いてbody内に以下の様にサムネイルの画像が追加されているのを確認して下さい。src="../images/page4_thumb.jpg"></div>ナビに関するcssは以下の様に設定しました。:hoverの設定もしているので、ナビの画像にマウスオーバーするとサムネイルに赤枠が表示されます。#f00;}次にjQueryを確認して以下の処理が追加されていることを確認して下さい。toggleイベントを利用して本物のナビをクリックするようにしています。2行目で利用しているthis.idとsplitのテクニックはサンプルページ:タブメニュー(2)で紹介しています。this.id.split("_")[1];$("#nivoNavi"+myID).trigger("click");})結果として、追加したサムネイルをクリックすると画像が切り替わります。あとは現在表示している画像のサムネイルを変更するようにします。サムネイルのハイライト次は表示している画像に合わせてサムネイルをハイライトします。サンプル(nivo4/05.html)を開いてbody内の構成とcssはnivo4/04.htmlから変更がないことを確認して下さい。jQueryは少々難しいかもしれません。以下の部分で最初のサムネイル以外の透明度を0.3に変更しています。fadeToメソッドを利用しました。$("#navi>img:not(:first)").fadeTo(1,0.3);サムネイルを切り替えるテクニックはサンプルページ:選択肢の作成(2)のテクニックを利用しています(このテクニックは当サイトで最も難易度が高いものの1つです)。以下の部分がそれで4、行目で古いサムネイルの透明度を0.3にして、4行目で新しいサムネイルの透明度を1.0にしています。6行目でハイライトされたサムネイルの番号を変数slideIDに記憶させるのを忘れないで下さい。slider」のコールバックであるafterChangeで設定されているため、画像が切り替わってからサムネイルを切り替えます。最後にサムネイルにマウスオーバーしている間は画像を切り替えないようにします。slider」は画像にマウスオーバーしているときは停止しますが、ナビにマウスオーバーしている時は停止しません。ナビにマウスオーバーしたときも停止させた方が仕様としては正しい気がします。この処理は前項の仕組みに比べると簡単です。サンプル(nivo4/06.html)を開いてbody内の構成とcssはnivo4/05.htmlから変更がないことを確認して下さい。jQueryは以下の処理が追加されています。slider」が停止し、マウスアウトしたら再開するようになります。メモ画像が切り替わる前にサムネイルを切り替えるこれまで紹介したサンプルでは画像が切り替わってからサムネイルを切り替えましたが、画像の切替と同じタイミングでサムネイルを切り替える場合はどうしたら良いのでしょうか?。複雑になるのですがコールバックのbeforeChangeを利用して作成することが可能です。サンプル(nivo4/test01.html)を開いてbody内の構成とcssはnivo4/06.htmlから変更がないことを確認して下さい。jQueryは以下のように変更されています。nivo4/06.htmlとの違いが分かりにくいかもしれませんが、画像が切り替わる演出と同じタイミングでサムネイルのハイライトも切り替わる点が異なります。nextSlide;}まず1行目でafterChangeの代わりにbeforeChangeを利用しています。引数iで画像のidが送られてきますが、画像が切り替わる前なので1足さないといけません。2行目で変数nextSlideに1足した値を代入します。3行目の処理は1足した値が最後の画像IDを越えた場合、最初(0)に戻す処理です。あとは5行目と6行目で変数iの代わりに変数nextSlideを利用するだけです。slider」の説明は終わりです。sliderを開発した会社が作成したカルーセルのプラグイン「carouFredSel」を紹介します。