Nivo Slider

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 に設定します。