shadowbox 3.0bの設定

ふくいわ耳鼻咽喉科クリニックのウェブサイトに、画像表示用の設定変更を行いました。
今回から画像をクリックすると、ポップアップで大きな画像が表示されるようになりました。まだ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番目は最後まではまったところで苦労しました。非常に基本的なことなのですが、いままで設定ミスに気づかずに来ていました。。。

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


コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


最新の記事
カテゴリ
月別アーカイブ

診療予約システム

PC・お電話でのご予約 携帯でのご予約 QRコードに対応している携帯で読み取ると、診療予約システムをご利用頂けます。

INFORMATION

南さつま市から鹿児島市までカバーする耳鼻咽喉科、ふくいわ耳鼻咽喉科クリニックのホームページです。
耳鼻咽喉科・頭頸部外科・気管食道外科・アレルギー科・小児耳鼻咽喉科の診療を行っています。また、アレルギー専門医、がん治療認定医を取得しています。

医療法人エターナル
ふくいわ耳鼻咽喉科クリニック

〒897-0006
鹿児島県南さつま市加世田本町22-5
TEL:0993-53-3387

友だち追加
ページの先頭へ

今すぐ予約する