Thickboxで拡大した画像の上にswfがかぶらないようにする方法

スポンサーリンク

ThickboxをはじめとするLightbox系を仕事でよく使います。
制作するページにFlash(swf)がある状態でThickboxで画像拡大すると、画像の上にswfがかぶってしまう現象が起こります。
wmode=”transparent”というのをつけないといけないみたいです。

自分の場合、Dreamweaverの機能を使ってflashを組み込んでいるので、最初に、AC_RunActiveContent.jsもhead内に読み込みます。

“`<script src="AC_RunActiveContent.js" type="text/javascript"></script>“`

上記の「AC_RunActiveContent.js」をよみこませた上で、以下のコードを使います。

“`<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','640','height','480','src','swfname','quality','high', 'wmode','transparent','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','swfname' );
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="640" height="480" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="swfname" />
<param name="quality" value="high" />
<param name="WMODE" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="swfname" quality="high" bgcolor="#ffffff" width="640" height="480" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" />
</object>“`

  • 「640」と記載されている箇所…flashの横幅
  • 「480」と記載されている箇所…flashの縦幅
  • 「swfname」と記載されている箇所…swfファイルまでのパス(拡張子はいりません)

あとはFlashのバージョン番号などを修正する必要があるのでしょうけど、とりあえず、そのままでいいと思います。

参考サイト