投稿

Nivo Sliderを使ったときの些細な問題点

　
Nivo Slider はすばらしいライブラリなんですが、IE8（or IE7）で使うと、タイミングによってたまに『 ‘undefined’は null またはオブジェクトではありません。』というエラーが出ることがあります。
たまにというのはずいぶんと控えめな表現で、リロードしたりページ切替えしたりしていると、２、３回に１回くらいの頻度でこのエラーが出て、画像が切り替わらないということになります。（私の環境では）
FirefoxやChromeでは相当激しくそうやってもならないので、「IEってバカなのね」で済ましてもいいんですが、まだまだ50％以上のシェアをもつブラウザを無視すると、あとで痛い目にあうのはこっちなので、なんとか対処しなければ。
　
エラーが発生するのは、http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js の中なので、これを見てみるとって、パックされたソースを見るのは嫌！ということで、http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js に置き変えてみたところ、ピタッとエラーが止まりました。
　
そういうことなんですね。

/作成者:

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

/作成者: