画像を見せる際にLightboxを導入するケースはよくあります。
Lightboxがユーザビリティの観点から良いのかどうかは置いておいて、IE6対応で苦労したのでメモ。
利用したjQueryのプラグインは、「fancybox」です。IE6対応ですし、MITとGPLのデュアルライセンスで商用利用可でしたので。ちなみに、リンク先ページで紹介されている「fancybox2」は商用利用有料なので注意しましょう。
発生した現象
デフォルトの状態から、以下の部分をカスタマイズ。
- デフォルトのLightboxの幅と高さを変更
- Lightboxの背景全体に透過PNGで背景画像を指定
- 余計な空のdivタグを生成されないように、該当箇所を削除
がっつりと手を入れたわけではなく、見た目上の調整をおこなった程度の変更です。
FirefoxやGoogle Chromeでは正常に表示・動作できました。次にIE6の表示・動作確認。表示は特に問題なし、Lightboxの枠外をクリックするとLightboxは閉じる。ただ、閉じるボタンをクリックしても動作せず……。
原因
Lightboxの背景全体に透過PNGで背景画像を指定したのが原因でした。
fancyboxでは、IE6で表示すると「fancybox-ie6」というクラスが付与されます。そのクラスにAlphaImageLoaderを指定することで透過PNGを表示できるようにしています。
背景画像を指定した時に、Lightboxの背景部分のdiv要素にも同じようにAlphaImageLoaderを指定しました。するとdiv内要素にaタグがあってもクリックできないようです。他の要素を選択することもできなくなったので、aタグだけでなく、div内要素の上に透明の要素が重なっているイメージです。どうしてこうなるのか、詳しい原因はわかりませんが、現象から考えるとこんな感じでした。
【参考】IE-winで透過PNGを利用する方法 – Archiva
あと、「AlphaImageLoader」を指定した要素が<a>タグを含む場合は注意しましょう。リンク領域がクリックできなくなる可能性があります。解決の鍵は「position: relative;」と「z-index」。たとえばAlphaImageLoderを指定した要素の内側に<div>でも作って指定してやれば良いでしょう。ただ残念ながら、全ての状況で有効な訳ではありません。隣り合い、重なり合うレイヤに対していろいろ試してみましょう。
解決策
AlphaImageLoaderを指定して透過PNGを表示できるようにするのではなく、IE6表示時は背景画像を透過GIFに変更しました。
透過画像が複雑な形ではなく影がなかったこと、Lightboxの枠外背景が黒に近い一色だったので、透過GIF作成時の調整で見た目に問題なかったことで、このようなシンプルな対応でできました。
上記サイトの解決策は試していません。fancybox自体が、様々な要素にpositionとz-indexを設定しているので、中途半端に変更するとそもそもLightboxが機能しなくなる可能性がありましたので。
透過GIF＝ギザギザというイメージしかなったのですが、今回の件で透過GIFって使えるなと。というより、この方法をとれなかったら工数が格段に増えていた気が……。
公開：2013/02/15 | 更新：2013/12/16