Home - jQuery - ThickBoxとSWFObjectでswfを簡単に表示させる

ThickBoxとSWFObjectでswfを簡単に表示させる

  • posted on 2008年10月31日 04:25 / update 2012年6月 5日 05:04 / by hoehoe3

LightBox系のjQueryプラグイン、ThickBoxとSWFObjectでHTMLを用意せずに簡単にswfが表示できるようにしてみたよ。

ThickBoxはLigitBox(modal?)系のjQueryプラグインです。画像だけでなく、HTMLをIFRAMEやインラインに読み込んで、動的に中身を表示することができます。FlashもHTMLを読んじゃえば簡単に表示できるんですけど、SWFObjectの書き方ってすぐ忘れるしw。いちいちHTMLファイルを用意するのが面倒。。画像のときみたいに、URLにパラメータをぽこぽこ追加して、タグを動的に生成してくれたら楽なんじゃね?と思ったわけです。まー似たようなのはあるけど自分用ってことで。。

実装するよ

jQueryThickBoxSWFObjectが必要です。現状の最新版でいいはず。
ダウンロードしてセッティングしときます。

thickbox.jsを改造

function tb_show(caption, url, imageGroup) {
  (中略)
    if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || 
       urlType == '.bmp'){//code to show images
  (中略)
      imgPreloader.src = url;
    }else{//code to show html ←ここを変える

thickbox.jsの182行目を、下のようにに変更。

    } else if(urlType == '.swf') {
      
      var queryString = url.replace(/^[^\?]+\??/,'');
      var params = tb_parseQuery( queryString );
      
      TB_WIDTH = (params['width']*1) || 550;    // 横幅
      TB_HEIGHT = (params['height']*1) || 400;  // 高さ
      SWF_VERSION = params['ver'] || 8;      // 必要なFlashのバージョン
      SWF_COLOR = params['color'] || '#FFFFFF';  // 背景
      SWF_WMODE = params['wmode'] || 'opaque';  // ウィンドウモード
      SWF_SCALE = params['scale'] || 'noscale';  // 伸縮
      SWF_MENU = params['menu'] || 'true';    // メニュー

      
      if(params['fullscreen'] != "true") { // 普通のとき
        $("#TB_window").append("<div id='tbSWFContents'><script type='text/javascript'>var so = new SWFObject('"+url+"', 'tbObject', '"+TB_WIDTH+"', '"+TB_HEIGHT+"', '"+SWF_VERSION+"', '"+SWF_COLOR+"');so.addParam('wmode', '"+SWF_WMODE+"');so.addParam('scale', '"+SWF_SCALE+"');so.addParam('menu', '"+SWF_MENU+"');so.write('tbSWFContents');</script></div>");
        tb_position();
      } else { // 全画面のとき(暫定対応)
        $("#TB_window").append("<div id='tbSWFContents'><script type='text/javascript'>var so = new SWFObject('"+url+"', 'tbObject', '100%', '100%', '"+SWF_VERSION+"', '"+SWF_COLOR+ "');so.addParam('wmode', '"+SWF_WMODE+"');so.addParam('scale', '"+SWF_SCALE+"');so.addParam('menu', '"+SWF_MENU+"');so.write('tbSWFContents');</script></div>");
        $("#TB_window").css({top:"0", left:"0", width:"100%", height:"100%"});
        $("#tbSWFContents").css({top:"0", left:"0", width:"100%", height:"100%"});
      }
      
      $("#tbSWFContents embed, #tbSWFContents object").css("margin","0");
      $("#tbSWFContents embed, #tbSWFContents object").css("vertical-align","bottom");

      if(params['wmode'] == "transparent") { //wmodeがtransparentなら背景と枠線を消す
        $("#TB_window").css({background:"none", border:"none"});
      }
      
      $("#TB_load").remove();
      $("#TB_ImageOff").click(tb_remove);
      $("#TB_window").css({display:"block"}); //for safari using css instead of show

    }else{//code to show html

レイヤー表示、位置あわせ、等々面倒な部分は、ThickBoxとjQueryにまかせて、拡張子.swfを判別→SWFObjectのタグを動的に生成→CSSの調整を追加します。閉じるボタンのエリアは好きじゃないんで入れてませんw。変更できたら上書きしときます。バックアップも忘れずに。

使い方

表示させたいswfのURLに、幅と高さのパラメータを加え、アンカーのクラスに「thickbox」と指定するだけ。パラメータは指定しないと表のデフォルトが適用されます。

<a href="http://txton.net/hoehoe/temp/test1.swf?width=550&height=360" class="thickbox">
表示させるよ。
</a>

・普通のとき (幅、高さを指定)
 表示させるよ

・背景を変えて、拡張メニューは出さないとき
 表示させるよ

・背景を透明にするとき (枠と背景は消えます)
 表示させるよ

とりあえず下のSWFObjectパラメータを設定できます。対応させてないパラメータは、適宜スクリプトに追加すればいいんじゃないかな。

width 1 〜 swfの幅 (デフォルトは550px)
height 1 〜 swfの高さ (デフォルトは400px)
ver 1 〜 必要なFlash pluginのバージョン (デフォルトは8)
color #RRGGBB 背景色 (デフォルトは#FFFFFF)
wmode String ウィンドウモード。標準(window )/不透明(opaque )/透明(transparent) (デフォルトはopaque)
scale String 伸縮。すべて表示(showall)/枠なし(noborder )/フィット(exactfit )/拡大・縮小なし(noscale) (デフォルトはnoscale)
ver Boolean メニューを表示/非表示 (デフォルトはtrue)
fullscreen Boolean ブラウザ内で全画面、縦横を100%にします (デフォルトはfalse)

おまけで全画面にも対応。

fullscreen=true と設定すると、ブラウザ内に全画面表示にもできます。背景を透明にするとだいぶイイ感じですよ?ただ、全画面に表示すると、画面をクリックしても元のページに戻れなくなっちゃいます。ThickBoxの機能は生きてるので「escキー」を押すとレイヤーを閉じれます。

・背景は透明、伸縮をフィットにして全画面(100%)表示 (escキーで閉じる)
 表示させるよ

マウスのイベントが取れないのは、Flash上でマウスのイベントをjQuery側に通知してあげないとだめですねー。その逆も入れたい。表示周りはCSSを動的にいじってムリヤリ対応させてるだけなんで、環境によってはちゃんと見えないかも。FFだとかなり怪しい。IE8も。あーIE6とかね。。

イベント周りとか、もっちょと修正してアップデートかけてきますよ。。たぶん。

COMMENT

Auther
hoehoe: おおさか方面でWebとかやってますよ。
Search
Feeds