jQueryで使えるLightboxなプラグイン - Facebox - CeeBox - fancybox
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の使い方は、以下のサイトがわかりやすかったです。
Facebox 1.2 LightBox風に角丸で画像をポップアップ - かたつむりくんのWWW
http://www.tinybeans.net/blog/2008/05/facebox-12-lightbox.html
CeeBox
こちらはオーソドックスな背景色が変わるLightbox風プラグインですね。
閉じるボタンとかのデザインがいい感じです。
現在最新のjQuery 1.4.2でも動作します。
しかしCeeBoxも、Faceboxと同様の症状が現れました。
つまりFirefoxでgoogle analyticsのコードと衝突し、表示に失敗します。
プラグイン探しの旅に疲れたので、とりあえず当該箇所のみgoogle analyticsのコードを除き処理することにしますが、原因をちゃんと確認したいなぁ……（JavaScriptはよくわからないのですが）
fancybox
色々検討しましたが、fancyboxにたどり着きました。
きっかけはThickBox 3.1……長い間メンテナンスしてないから他の使うといいよ、と書いてあった中にありました。この中で聞いたことがあるのがfancyboxとColorBoxでした。後者は「利用に当たってはリンクが必要」と聞いたので優先順位を下げたのですが、これ単にMITライセンスの著作権表示のことを指していたのかなぁ……。
とりあえずfancyboxでは上記問題も起きなかったので、これを使うことにしました。
使い方やオプション等は以下のサイトが詳しかったです。
fancyboxは、オプションが細かく設定できるのに、同梱のサンプルだけではわかりにくいいので助かりますね♪
