Jquery[superbox]Flashネタ

Pocket

jquerysuperboxを使った時、背景にflashオブジェクトがあると入り込んできてしまう現象について。

Jqueryのライブラリー【superbox】を使った際、後ろ側にflashオブジェクトがあるとalphaエフェクトの中に入り込んできてしまうという現象があって、これを解決する方法について作業中に気付いた点があったのでメモ。

jqueryのライブラリーで【lightbox】は誰もが知ってる画像系スクリプトの代表みたいなもんですね。

このlightboxは、画像のみを表示できるものですが、これにプラスhtmlを表示したりできる優れ物が【superbox】です。

Superbox

ここからダウンロードできます⇒Jquery「superbox」
(Donwload jQuery Superbox! 0.9.1 (zip)をクリックして下さい)

まずは、superboxの説明を少々。設置方法は、以下の記述を参考にどうぞ(head内)

<link rel="stylesheet" href="./css/jquery.superbox.css" type="text/css" media="all" />
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.superbox.js"></script>
<script type="text/javascript">
    $(function(){
         $.superbox.settings = {
            closeTxt: "Close",
            loadTxt: "Loading...",
            nextTxt: "Next",
            prevTxt: "Previous"
        };
         $.superbox();
     });
</script>

4行目の$functionからの部分は、外部ファイルにしたほうがスッキリしていいですね。この程度の記述であれば外部にする必要もないかもしれないですけどねw

次に画像やhtmlに付けるrelは以下のように記述します。

<p>
<a href="./image/hoge.jpg" rel="superbox[image]">
<img src="./image/hoge.jpg" width="250" height="250" />
</p>

<p>
<a href="./hoge.html" rel="superbox[iframe][450x280]">
<img src="image/hogehoge.jpg" width="700" height="40" />
</p>

上記のimage,iframeの他にもgallery,my_gallery(複数画像表示)やcontent(コンテンツ表示)など、様々な形式に対応できるようになっています。

と、この様にすごく便利なのですがflashが背景にある時は、気をつけなければいけません。

Flashが背景にあって最背面にもっていけない

flashが背景にあるとsuperboxのエフェクト内に侵入してくるのですw

これを解決するためには、【wmode】を使う必要があります。【wmode】でFlash の背景を透明化/不透明化の設定が可能です。今回は不透明化を利用することでflashを後ろに下げる事ができるってわけです。

選択支は2つありました「transparent」(透明化)を使う事で解決できるのかと思いきや、ここに落とし穴があります。

  • ■背景透過を使ったflashだと背景色が変わってしまう件

flashの背景色が変わってしまった現象で、今回transparentでは対応できないという事を知りました。

そこで、「Opaque」(不透明化)の指定を入れたらこれで、難なく対応できました。まぁ、どちらを使ってもflashを後ろに下げる事はできるようです。でも、flash内で日本語入力が使えなくなる(firefox)とか対応できない部分が出るようなので、使う時は注意が必要ですね。

記述をする部分は以下のフラッシュのパラメーターソース部分です。

<object>
<param name="hogehogehogehogeho" value="hogehgoeohgeohge" />
<param name="hogehogehogehogehogheoge" value="hogegehogehogehoge" />
<param name="wmode"  value="opaque">
<embed src="hogehgogeohgeohge" wmode="opaque" />
</object>

Flashの話をしておきながら、自分はActionscriptは全然(ry

Pocket

Comments