Lightbox系jQueryプラグイン「ColorBox」が”Cannot read property ‘msie’ of undefined”で動かないときはこれで直る。


僕はポップアップウィンドウにこれを使ってます。
いわゆるLightbox風のjQueryプラグンですが、サムネイル画像を大きく見せるときに使うやつです。

Colorbox – a jQuery lightbox – Jack Moore

Demoはこちら

今回、このプラグインを紹介したかったわけじゃなくて、
これが最新のjQueryではうまく動かないので、その対処法を紹介するためです。

別にこれを使わないといけないわけじゃないですが、
ずっと使ってきたもので使い勝手もいいから他のに乗り換えるのも面倒だし何とか使い続けたいという感じです。
ポップアップ系はたいていこれでうまくいきます。

jQueryバージョンの問題

このプラグインを使うにはjQueryが必須。
で、エラーがでて動かせないのはjQuery1.9からです。

具体的には、
「Cannot read property ‘msie’ of undefined」
というエラーが出てポップアップが動かない。

jQuery1.9からはこのmsieの判定方法が変わっているからというのが理由。
早速直しましょう。

Colorboxプラグインを修正

エラーの原因はこれ。
古いコードで「Cannot read property ‘msie’ of undefined」のエラーが出たときの対処法

JQueryの1.9から $.browser が削除されたからで、
それに代わるコードにします。
具体的には
browser → support
と変更するだけ。

jquery.colorbox.js
jquery.colorbox-min.js

-minがついてるのは改行とかを除いた圧縮したファイルね。
中身はどちらも同じです。
どちらを参照して使ってるかによります。
よくわからなければどっちも変更すればいいです。

jquery.colorbox.js

a.browser.msie

 ↓

a.support.msie
jquery.colorbox-min.js

$.browser.msie

 ↓

$.support.msie

わからなかったら必ずハマるので、
自分の備忘を兼ねて書きました。