sliderを操作できるようにします。carouFredSelのjavaScriptファイルを改造せずに実現することができました。sliderと組みあわせるためにはcarouFredSelのサムネイルをクリックしたら、そのサムネイルが中央に移動するようにした方がよいでしょう。carouFredSelのオプションには、特定のサムネイル位置に移動するような処理はないようなので、ページボタンを利用して対応します。サンプル(fred9/01.html)を開いてbody内の構成を確認して下さい。以下の様にnextボタンの処理の下にページボタン用のdiv要素を追加しました。ページボタンの追加についてはCarouFredSel(3)で説明しているので、忘れてしまった方は確認しておいて下さい。class="carouPage"></div>これに伴いcssの設定も追加していますが、最終的にページボタンは非表示にするため気にしなくてOKです。jQueryでは以下の様にpaginationプロパティに上記で追加したcarouPageクラスを指定してページボタンを表示するようにしました。".carouPage";結果としてページボタンが表示されますが、前回のサンプルでサムネイルを1つずつ切り替えるようにしたためサムネイル数(つまり26個)のページボタンが表示されます。実際にページボタンをクリックして特定の位置に移動するか確認して下さい。「1」のボタンは「A」を指しますから、これをクリックすると「A」のサムネイルが左端に移動します。※carouFredSelの基準点は左端のためサムネイルをクリックして切り替える(2)続いてはサムネイルをクリックしたら、サムネイルに対応したページボタンをクリックするようにします。triggerイベントを利用します。サンプル(fred9/02.html)を開いてbody内の構成を確認して下さい。以下の様にサムネイルの要素にid属性を追加して、クリックされた際にどのサムネイルがを特定できるようにします。height="50"></li>続いてjQueryを確認して、以下の処理が追加されていることを確認して下さい。ul要素内のli要素がクリックされたら、その要素のidを取得しsplitメソッドを利用して数字部分だけを変数myIDに代入するようにしています。※this.idについては使い方:thisについて(2)で説明しています。this.id.split("_")[1];alert(myID);});正しくidが取得できているか確認するためにalertを利用してmyIDを表示するようにしたので、実際にサムネイルをクリックして数字が表示されるか確認して下さい。あとはこの数字を基に特定のページボタンをクリックするようにします。triggerイベントでページボタンをクリックするようにします。サンプル(fred9/03.html)を開いてjQueryのサムネイルをクリックした時の処理が以下の様に変更されていることを確認して下さい。ポイントは3行目です。triggerイベントを利用してクリックしています。this.id.split("_")[1];$(".carouPage>a").eq(myID).trigger("click");});結果としてサムネイルをクリックすると、そのサムネイルが左端の位置になるように移動します(例えばAをクリックするとAが左端になる位置に移動します)。これはサムネイルに基準が左端にあるためです。これでは都合が悪いのでクリックした位置が中央(つまり左端から3番目)になるように変更します。サンプル(fred9/03b.html)を開いてjQueryのサムネイルをクリックした時の処理が以下の様に変更されていることを確認して下さい。変更したのは2行目です。-3;$(".carouPage>a").eq(myID).trigger("click");});クリックされたサムネイルを左端から3番目(つまり中央)にずらして配置するために3引いています。取得したthis.idは文字列なので、Numberメソッドを利用して数値に変換してから引くことに注意して下さい。eqメソッドはマイナスの引数にも対応しており、その場合は後から数えて指定されます(リファレンスに詳しい説明があるので確認して下さい)。結果として、クリックしたサムネイルが中央になるように移動します。あとはページボタンのcssを修正して表示しないようにします。triggerでページボタンをクリックする必要があるので削除してはダメです。表示しないようにするだけにしてください。サンプル(fred9/04.html)を開いてページボタンのcss設定が以下の様に変更されていることを確認して下さい。displayプロパティをnoneにすることで表示しないようにしました。{display:none;}結果としてページボタンが表示されなくなりますが、存在はしているのでサムネイルをクリックすると機能することが確認できます。今回はここで終了です。sliderとの連携になります。