POPS-iBOX B2はLightBox風の画像拡大スクリプトで、jQueryのプラグインです。

作者はPOPS WEB KOUBOUさんで、POPS-iBOXシリーズとして３種類のプラグインを配布されています。

先日、趣味で個人的に運営している現説公開サイトでPOPS-iBOX B2を設置してみたのですが、ひとつ、つまずいた点があったのでそのメモです。

設置先はこちら。
平城宮跡東院地区西北部の発掘調査　現場写真

POPS-iBOX B2の設置は簡単で、配布サイトに記載されている「設置方法」にしたがってセットアップしました。

対応ブラウザはIE6+ Safari(4.0.4) Firefox(3.5.5) Chrome(5.0.375.99) Opera(10.53)です。

一通り作業ができてMacのFirefoxやSafari、Chromeで動作確認をして問題なし。
ところがWindowsのIE8で確認したところ、ポップアップウィンドウの枠がまったく表示されません。

「設置方法」の[ 1 ] CSS 読み込み設定には以下のように記載されています。

★CSSで、IE (IE6.7.8)では透過PNG画像を使用してフィルター処理しています。画像パスを確認ください。

pops-ibox-b2_ie8.cssのfilterプロパティで指定している画像パスを書き替えたはずだったのですが、読み込まれていないようです。
原因は以下の２点でした。

• pops-ibox-b2_ie8.cssのbackgroundプロパティとかで指定されている画像のパスは、CSSファイルからの相対パスである。しかしfilterプロパティでのパスは、このCSSを読み込んでいるHTMLファイルからの相対パスにしなければならない。
• filterプロパティが記載されているのはpops-ibox-b2_ie8.cssだけかと思い込んでいたが、pops-ibox-b2.cssにも複数箇所ある。

上記を修正したら、IE7,8でも正常に表示されました。