Lightbox JS v2.0 と Flash

  • Posted by: 相馬称
  • 2006年10月23日 19:52
  • 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 等でも同じような調子で行けると思いますが確かめてません）の末尾ちかく、

function showSelectBoxes(){ selects = document.getElementsByTagName("select"); for (i = 0; i != selects.length; i++) { selects[i].style.visibility = "visible"; } } // --------------------------------------------------- function hideSelectBoxes(){ selects = document.getElementsByTagName("select"); for (i = 0; i != selects.length; i++) { selects[i].style.visibility = "hidden"; } } とあるのが該当箇所。これにそれぞれ行を追加して、 function showSelectBoxes(){ selects = document.getElementsByTagName("select"); for (i = 0; i != selects.length; i++) { selects[i].style.visibility = "visible"; } document.getElementById("flash").style.visibility = "visible"; } // --------------------------------------------------- function hideSelectBoxes(){ selects = document.getElementsByTagName("select"); for (i = 0; i != selects.length; i++) { selects[i].style.visibility = "hidden"; } document.getElementById("flash").style.visibility = "hidden"; } とすればOK。

トラックバック(1)

トラックバックURL: http://web-conte.com/blue/mt-tb.cgi/134

以下のリストにある記事は、当記事 " Lightbox JS v2.0 と Flash " を参照しています :

xhtml上に配置したFlashが常に最前面にきてしまう件 from ks-product
xhtml+cssでプルダウン式ナビゲーションを作る際、その部分が他のコンテンツと重なることになるわけだが、その対象がFlashである場合、ブラウザによっ...

2007年2月19日 01:02

コメント(5)

参考になりました。なるほどです。

トン at 2006年12月13日 01:29

lightboxがらみではなかったのですが、WINのFirefoxとIE6で問題が解決しました。MACのFirefoxとsafariはswf上にPNGのレイヤーを透過表示してくれたのですが（アニメが動作時は虫食いになりましたが）WINで解決できなかったところ参考に致しました。こちらは動作時でも虫食いになりません。有り難うございました。

maveric nomad at 2006年12月20日 20:45

はじめまして。
フラッシュメニューを使用していて、Lightboxも使用しているのですが、transparentを
使うとIEではうまくいくのですが、Firefoxではフラッシュ自体表示されなくて
困っていたところ、こちらの記事にたどりつき、解決しました。
ありがとうございました。感謝感謝です

ななこ at 2007年3月27日 01:13

Safari 3 では、この問題は解決されているようです！
再描画があってもバグっぽくならないようになっていました。(^_^
wmode="transparent" で OK です。

minorio at 2008年2月 8日 12:19

＞minorioさん
どうも、ご報告ありがとうございます。

SOMA Hitoshi at 2008年2月 8日 15:42

コメントする