blue

Lightbox JS v2.0 と Flash

  • Posted by: SOMA Hitoshi
  • 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 等でも同じような調子で行けると思いますが確かめてません)の末尾ちかく、

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。

関連記事

トラックバック(4)

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

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

xhtml+cssでプルダウン式ナビゲーションを作る際、その部分が他のコンテンツと重なることになるわけだが、その対象がFlashである場合、ブラウザによっ...

2007年2月19日 01:02

レイヤーの重なり順と云えばレイヤーの重なり順の話なのだが z-indexが FLASH に於いては実は通用しなかったりして知らないと地味に泣ける話な件。 ...

2008年8月15日 18:01

flashより前に出るlightbox from ドーナッツファクトリー
lightbox 新しいlightboxのバージョンを使用したら、 何もしていない状態でflashがlightboxの下にもぐりこんでくれた。 今まで...

2009年1月24日 12:27

Windows+IEに対応しました from reverse-orders blog
今日大学の後輩のWindowsでこのブログを見て驚愕。見出しが切れてたりFlas...

2009年1月27日 04:57
 

広告