※おことわり：本記事アップ後にVideoboxに追加してMediaboxも設置しています。なおFancyZoomの導入により現在オリジナルではSlimboxと共存できませんがなくなりましたが、一部コード改変によりSlimboxと共存できるようにしました。但しSlimboxではイメージセットでのNEXT,BACKボタンは表示できません。
写真などの画像のサムネイルをクリックすると、背景が暗くなって画面中央にオリジナル画像がハイライト表示される”Lightbox”、最近はあちこちのサイトで見かけるようになりました。今回は”Lightbox”に、さらにYouTubeなどのFlashムービーをLightbox風に表示してくれるという”Videobox”をブログに追加で設置してみました。
紆余曲折ありましたがやっと表示されるようになりました。サンプルがこちら。または左の画像をクリックするとYouTubeがLightbox風に表示されます。
実は静止画、動画を問わずまとめてLightbox風に表示してくれる”Lightwindow”を１ケ月ほど前に試してみたのですが、現在IE6ではうまく表示できないようで、せっかく設置したのに仕方なく断念。
そんな折、Gigazineさんの記事で”Videobox”を知りました。
マイコミジャーナルの記事などを読むと、設置手順はそれほど難しくもないようです。必要なファイルをダウンロードして、ファイルマネージャを使ってブログサイトにアップロードし、あとはHTMLに少し書き加えればOKと順調に作業をしていきました。私が利用しているSeesaaブログは記事（テキスト）や画像ファイル以外にもCSSやJavascriptなどさまざまなファイルを自由にアップロードできるので、カスタマイズを行うには使い勝手の良いブログサイトです。
しかし、さあいざ動かしてみるとうまく表示されません。
ネットでいろいろとググってみると、手順に従えば確かにVideobox単体では問題なく動作するのですが、ここまできて「LightboxとVideoboxとは共存できない」ということがわかりました。せっかく設置してみたのに、またあきらめるしかないのでしょうか？
いいえ、大丈夫。今回は救世主がいることがわかりました！ ネットには随分と助けられることが多いですね。
今回はLightboxとVideoboｘ共存について私なりにポイントを書いておきます。特に私を悩ませ続けたIE対策についても触れておきます。
なにぶん素人がまとめたものですのでそのつもりで。 なお、Right Bowerさん、universal motor geratさん、Lab on Webさんの記事はとても参考になりました。 この場をお借りして感謝いたします。
＜共存のためのポイント＞
● Lightboxに代えてSlimboxを導入
・ VideoboxはmootoolsというJavascriptライブラリを使用しているが、Lightboxは
prototypeを使用している。双方のライブラリのバッティングが起きて共存できない。
・ そこでLightboxに代えて、同様の表示効果がありVideoboxと同じmootoolsライブラリ上
で動作する”Slimbox”に入れ替えることでバッティングがなくなり、SlimboxとVideobox
とが共存できる。
・ SlimboxはLightboxと100% コンパチブルとなっていて、Slimboxは動作にLightboxと
同じ rel="lightbox"を仕様としているため、LightboxからSlimboxに移行しても、
記事の書き換えが不要。これによりLightbox用に作成した過去記事も書き換えなし
にをそのままSlimboxで利用できるので安心して乗換できる。救世主♪
・ Slimbox+mootools とLightbox+prototypeでは Slimboxがかなり軽い。実際表示が速く
なったとの報告も多い。
Slimbox表示サンプル
● SlimboxとVideoboxのCSSファイルを統合して使う
※5/13現在SlimboxはVer.1.41、Videoboxはv1.1です。今後のバージョンアップによって
はCSSが変更されているかもしれません。
・ SlimboxとVideoboxの両方のCSSファイルをそのまま使うと、表示幅がおかしくなったり、
Slimboxでイメージセット（複数画像）を利用した場合の「Next」「Previous」の表示ができ
ないなどの問題が生じた。確認すると共通のライブラリを使用している関係からかCSS
の内容はほぼ同様である。
双方で異なっている部分をいずれかのCSSファイルに統合して１つのCSSファイルだけ
を使うようにする。
統合後のCSSはこちら ※名前はオリジナルと区別するためslimbox_mdf.cssに変更。
● IE6対策（１） HTML冒頭の＜?xml version="1.0"以下を1行削除
こちらはRight Bowerさんの記事にも詳しく書かれていますが、HTML冒頭に
＜?xml version="1.0"・・の記述があるとIE6では動作しない場合も。対策は２つある
ようですが、私はこの１行をざっくり削除しました。
さあ、これでFFでもIE6でもうまく表示されるはずです。しかしIE6だとなおエラーが起きてしましました！
検証してみるととどうもmootools.jsを読み込んだ後にエラーが発生しているようです。
● IE6対策（２） ScriptのHTMLでの配置を工夫する
上記エラーについて、IEの一時ファイルを削除すると治るケースもあるようですが
今回はこれでは解決しません。
Lab on Webさんに対策記事を発見。Javascriptの読み込みが早すぎて症状が
起きているのが原因のようです。しかし、対策として書かれていた、Scriptを
<head>タグではなく、<body>の終了タグ直前に持っていくというのを試しても、
私の環境ではダメでした。しかしあきらめずにScriptの配置をあれこれ試してみ
ると、なんとかIE6ではエラーがなくなりました。ブラウザからソースを表示して
確認してみてください。
ただ、正直まだIE5.5ではエラーが起きるようです。さすがにIE5.5をまだ使って
いる方は少ないでしょうからとりあえずこれで良しとしましょう。
ちなみにこのエラー、Google Maps APIをブログで使っている場合も起きる
のだとか。この場合もScriptの配置を変更すれば治るようです。
とにかくIEは頭痛のタネ！
関連記事 1
このlitBoxのJavaScriptエラーについて、
IE6、IE7のエンジンに問題があるようですね。
(8はテストした結果やはり問題無いようで。)
litBoxでも全く同じエラーが発生します。
(そりゃそうか。)
私の場合はbody終了直前への移動で改善されました。