投稿

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

 
Nivo Slider はすばらしいライブラリなんですが、IE8(or IE7)で使うと、タイミングによってたまに『 ‘undefined’は null またはオブジェクトではありません。』というエラーが出ることがあります。
たまにというのはずいぶんと控えめな表現で、リロードしたりページ切替えしたりしていると、2、3回に1回くらいの頻度でこのエラーが出て、画像が切り替わらないということになります。(私の環境では)
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 に設定します。