Nivo Slider という、jQueryを使ったかっちょいいスライダーです。
サムネイル画像の上にマウスをもっていくと（マウスオーバー）、メインの画像が切り替わるというのはよくやることですよね。
あれはただ、onMouseOver = “jQuery(‘#main-img”).attr(‘src’, ‘sub-img-02.jpg’);” みたいなことをしてるだけで、切替え効果などは特に考えていないわけなんですが、このハデハデ GUI全盛の折にそれでいいのか、ということです。（ボクはシンプルな方が好きなんですけど）
で、Nivo Slider の出番です。
- サムネイルに対応している
- 画像にキャプションをかぶせられる
- 勝手に動かない（スライドショーじゃないので）
こんなわがままな要望をかなえてくれます。
実際に使うときの注意点は、こんなところ。
- jQueryの 1.2.6には対応していないので、素直に ajax.googleapis.com から最新版（1.4.2）を取ってきましょう。
- jquery.nivo.slider.pack.jsのソースを見ると、ほぇ?! っとなりますが、大丈夫。これで動きます。
- $(window).load(function() になっているところもそのままで。入れるタイミングがあるようです。
- manualAdvance:true にすると勝手に動きません。
- controlNavThumbs:true でサムネイルが出ます。
- サムネイルファイルは、画像と同じところに『同じ名前_thumb.jpg』というファイルを作っておきましょう。
- キャプションは、imgの title に設定します。
