あかつきのお宿

jqueryでlightboxっぽく見せるColorBoxってプラグインがあるんですけどね。

それを動かしているサイトは未だにjqueryのバージョンが1.4のを使ってたから、そいつを1.7にバージョンアップしたわけですわ。

そしたらこのColorBoxが上手く動かなくなったんで、もし同じ状態になった人のためにメモを残しときたいと思う所存にございます。

もしかしたら僕がColorBoxの古いバージョンを使っているだけかもしれないんですけど、まあそれならそれで問題ないってことで……ね。

そもそもの発端

何かね、ChromeでこのColorBoxを使ってるページを開こうとしたら、なぜか開けなかったのよ。本当ならlightboxみたいににょわっとフロートウインドウ（って言うの？）が出てくるはずのところが、普通にページ遷移してまう。まるでjavascriptのエラーが出ているかのごとくページ遷移してまう。

Safariでは大丈夫だったのに。IEですら大丈夫だったのに。

アイイーデスラダイジョウブダッタノニ……。

で、まあ結論から言うとまさしくjavascirptのエラーが出てたんですけど、それがこんな感じ↓のエラーだったんすよ。

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

ちょっと長ったらしいね。読み終えるまでにうまい棒の一本くらいなら食べ終われるかもしれない。いや、無理かな。

まあ、何かよく分かんないけどfutureって単語も入ってるし、将来的に何かが非推奨になるとかそんな感じだと思います。何かって言うか、layerXとかlayerYっていうイベントが。

で、どうすればええんやろって思ってたら、どうやらjqueryのバージョンを上げると直るよって言ってる人がいたので、その人の助言に従ってjqueryを1.4から1.7にしたわけです、はい。

っていうか未だに1.4を使ってるとか、すっかり忘れてたよ。てっきり1.7にバージョンアップしてたはずだって思い込んでた。そういうことってあるよね。

で、今回の騒ぎ

このバージョンアップによってjavascriptのエラーは出なくなった。それは良い。喜ばしい。バンザイ。

でもあんた、今度はウインドウが出て来なくなっちゃったじゃないの。何かこう、オーバーレイって言うの？　そこは動くので画面全体が灰色っぽくはなるんだけど、その後画面の中央に出てくるはずのアラートウインドウ的なあれが出て来ない。

バージョンアップして動かなくなったんだから明らかに原因はそれだろってのはさすがの僕でも見当がついたんですけど、でもどうすれば解決できるねんってところがよく分からなかった。

正直、理由については今もってなおよく分かってません。なので、とりあえずどうすれば直ったか、結論だけ書きます。

ど～しても理由を知りたいって方は、いつものようにググレカスの魔法をおとなしく喰らうか、てめーそれくらい調べとけごるぁって怒るか、どちらかを選ぶと良いんじゃないかな。できれば後者じゃない方が嬉しいけど……。

怒られたら涙が出ちゃう。だって女の子だもん。
（あかつきのお宿の管理人は生物学的には男です）



で、その解決方法ですが、ColorBoxを呼び出すときに一つ属性をつけてあげれば良いみたい。

$('#colorbox').colorbox({transition:"fade"});

こんな感じ。

この『transition』という属性はデフォルトだと『elastic』とか言うのになってます。これだとどうやらちゃんと表示されないっぽい。

この属性には『elastic』『fade』『none』の3つをセットできるみたいなので、とりあえずfadeってのにしてみると、Chromeでも正常に表示されるようになる。もちろんSafariやFirefox、IEもだいじょーぶ。



今回のことに限った話ではないんですけど、プラグインのファイルとか、jqueryみたいなライブラリとか、あとブラウザのバージョンとかって、どんどん上がっていくし、それにつれて今までできてたことができなくなったりすることもあるから、開発者の人はそういうとこに細かく注意払ってないといけないんだろうね。

僕はわりとその辺手を抜いてしまうタイプなので、もう少し気をつけなきゃな～って思います。

ま、今のところは思ってるだけですけどね、ふふふ。