GameGO! GameEX. の編集後記みたいなもの

Lightviewで苦しんだので、prototype.jsに別れをつげて、jQueryのプラグインで統一することにしました。

候補にあげたLightbox風プラグインはFaceboxとCeeBoxです。

画像や動画はもちろん、外部htmlページも開けるものを条件に探しました。

Facebox

背景色は変えず、太い枠でシンプルなウィンドウが開きます。

いい感じ。使ってないので知らないのですが、Facebook風だそうです。

そして軽い。とにかく類似のプラグインに較べ軽い。軽いは正義。スバラシイ。

しかし残念ながら小窓でウェブページを開く場合、その小窓で開くページにあるgoogle analyticsと衝突するようです（google analyticsのコードを除いたところ動作しました。）

Firefox3.6.6では、Faceboxの小窓を開くリンクをクリックしても、ステータスバーに「〜からデータを転送します」と表示したまま読込みを続け、小窓を開けません。

Firebugで確認したところ、以下のメッセージでした。

Firebug cannot find _firebugConsole element true Window *****

document.body is null

[Break on this error] for(var i=0;second[i];i++)first.push(s...EventListener(type,handle,false);else

まさかgoogle analyticsと衝突するとは……（そんな使い方想定してないよと怒られるのかもしれませんが）。

ちなみにGoogle Chrome 5.0.375.99 beta、IE8ではそのまま表示されました。

ただし要jQuery 1.2系です。

現在最新のjQuery 1.4.2で動作確認した上、必要な画像を減らし軽量化したFacebox私家版もありますが、こちらでも残念ながら同じ症状でした。

ちなみにFaceboxの使い方は、以下のサイトがわかりやすかったです。

CeeBox

こちらはオーソドックスな背景色が変わるLightbox風プラグインですね。

閉じるボタンとかのデザインがいい感じです。

現在最新のjQuery 1.4.2でも動作します。

しかしCeeBoxも、Faceboxと同様の症状が現れました。

つまりFirefoxでgoogle analyticsのコードと衝突し、表示に失敗します。

プラグイン探しの旅に疲れたので、とりあえず当該箇所のみgoogle analyticsのコードを除き処理することにしますが、原因をちゃんと確認したいなぁ……（JavaScriptはよくわからないのですが）

fancybox

色々検討しましたが、fancyboxにたどり着きました。

きっかけはThickBox 3.1……長い間メンテナンスしてないから他の使うといいよ、と書いてあった中にありました。この中で聞いたことがあるのがfancyboxとColorBoxでした。後者は「利用に当たってはリンクが必要」と聞いたので優先順位を下げたのですが、これ単にMITライセンスの著作権表示のことを指していたのかなぁ……。

とりあえずfancyboxでは上記問題も起きなかったので、これを使うことにしました。

使い方やオプション等は以下のサイトが詳しかったです。

fancyboxは、オプションが細かく設定できるのに、同梱のサンプルだけではわかりにくいいので助かりますね♪

まとめ

Lightboxなプラグインは、組み合わせ等で期待どおりの動作をしなかったりするので、最初から本来の設置場所にする前に、展開した状態でそのままアップロードして、既存の環境と組み合わせてみる。その上で各種ブラウザで動作確認を取ること。問題がない場合にはじめて、ちゃんとした場所に設置する……という手順がいいかと思います。

……結論にたどり着くまで、無駄手間を何度もかけた私の反省です(^^;