shadowbox 3.0bの設定

2009/09/13

ふくいわ耳鼻咽喉科クリニックのウェブサイトに、画像表示用の設定変更を行いました。
今回から画像をクリックすると、ポップアップで大きな画像が表示されるようになりました。まだ1ページのみの対応ですが、今後整備を進めていきます。

この表示方法は従来、lightboxというJAVA scriptで行われていたものですが、最近新しく出たshadowboxというスクリプトを見つけたので、今回はこちらを導入してみました。

導入は非常に簡単で、本家HPでの指示通りにセッティングすると、Firefox3ではあっさり表示されました。
しかし、IE7ではうまく動かず。ここではまってしまいました。。。。

結果的には、「DOCTYPEの設定でIE7が互換モードになっていた」ことが原因で、shadowboxのスクリプトは「標準モードにしなければ動かない」という縛りがあったのです。散々紆余曲折を経てようやく動くようになったので、ここでは備忘録として必要な設定を記載しておきます。

1.DOCTYPEはXHTML1.0にする。
2.「!DOCTYPE」の前のXML宣言は入れてはいけない（IE6で表示されなくなるため）。
3.文字コードはUTF-8とする。
4.shadowboxの言語設定は日本語（ja）とする。
5.METAタグで「”Content-Script-Type” content=”text/javascript”」を指定する。
6.ローディングアニメーションはshadowbox.css内の#sb-loadingに「background:url」で画像を直接指定する（画像は自前で用意する必要あり）。

特に5番目は最後まではまったところで苦労しました。非常に基本的なことなのですが、いままで設定ミスに気づかずに来ていました。。。

ウェブサイト制作、まだまだ奥が深いです。。。