Lightbox JS v2.0 と Flash
- October 23, 2006 7:52 PM
- web
web-conte.comでも画像の拡大表示時に使っている「Lightbox JS v2.0」。これ、ページ内にFlashが同居していると厄介なのである。自分のサイト（ここ）だとそもそもFlashを置いていないから気づきにくい問題なのだが、先日あるサイトを作っていてこのことに気づいた。Flashオブジェクトは z-indexなどの指定を無視し、基本的にドキュメントの最前面にあるように表示されてしまうため、Flashだけは背景に追いやられず、Lightboxで拡大表示させた画像のさらに手前に出てきてしまう。
このことの解決策はひとまずあって、たとえば「小粋空間: Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」などの解説が丁寧だ。要は、Flashを埋め込む際の記述のひとつに「背景を透過する」という命令にあたるものがあって、それを書き加えてやればいい。
<!-- object要素内に下記を追加 --> <param name="wmode" value="transparent" /> <!-- embed要素に下記の属性を追加 --> wmode="transparent"
ちなみに、ActiveXコントロールのアクティブ化問題のために、adobeから配布されている「AC_RunActiveContent.js」「AC_ActiveX.js」を利用して記述している場合には、
AC_FL_RunContent();の引数の最後に、
'wmode','transparent'を追加してやればいい。
AC_FL_RunContent( 'xxx','XXX','yyy','YYY', ... 'wmode','transparent'); //end AC code
で、この対応策で万事うまくいくのは Win IE。うまくいってくれないのが Safari である（中間な感じが Firefox）。本題はここから。
Safari では上記の記述をしてあっても、Flash内にアニメーション描画が発生すると、どうしてもその瞬間だけ（そして描画のあった部分だけが）最前面に出てきてしまい、事情を知らない人が見るとなんだか「バグっている」ような状態になる。これはそういう仕様のようでいかんともしがたい。最終的に辿り着いた別の対策が以下である。
これは「lightbox.js」本体にスクリプトを書き足すもので、サムネイルがクリックされた時点で Flash を含む div要素を非表示にする作戦。思いついてみれば初歩的な手だて。そもそも、オリジナルの lightbox.js のなかに同じような手を使ってドキュメント内のselect要素（これもどうしても手前にきてしまう）の表示／非表示を切り替える関数があるので、そこに特定の div を消す（そして、元に戻すために出す）スクリプトを書き足してやればすんなりいく。
Flashを div で囲む
まずは、Flash部分を div で囲み、id属性で特定できるようにしておく。ここでは仮に
<div id="flash"></div>で囲むとする。
lightbox.js の書き替え
「lightbox.js」（ここで引用しているのは v2.02 のソースです。v1.0 等でも同じような調子で行けると思いますが確かめてません）の末尾ちかく、
関連記事
トラックバック(4)
トラックバックURL: https://web-conte.com/blue/mt-tb.cgi/134
以下のリストにある記事は、当記事 " Lightbox JS v2.0 と Flash " を参照しています :