「Flash（swf）からLightboxを呼び出す」というニーズがこれまでに何回かあり、またついさっきもあって、その都度ちょっと面倒だったりしたのでメモ。なお、ウチの会社ではswfファイルの埋め込みには通常swfobject2を使ってるので、以下は「Lightbox2.04 + swfobject2 + ActionScript（ExternalInterfaceクラス）」という組み合わせが前提となっています。
Lightboxを入手
まず使用するLightboxのバージョンは2.04。Lokesh Dhakar氏によるLightbox 2の公式サイトで入手。
ベースHTMLの作成
次にベースとなるHTMLを作成。今回はとりあえずSWFObject 2 HTML and JavaScript ジェネレーターを使ってサクっと作りました。ポイントとしては、「SWFの定義」のオプションを一部変更すること。
まず、Lightboxを表示した際に、swfコンテンツが上に来てしまうのを避けるため、wmodeをtransparentに設定。また、ExternalInterfaceクラスを使うので、allowscriptaccessをalwaysに設定。できあがったHTMLは下記の通り：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta http-equiv="Content-Script-Type" content="text/javascript;" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
params.allowscriptaccess = "always";
var attributes = {};
swfobject.embedSWF("sample.swf", "myAlternativeContent", "800", "600", "9.0.0", false, flashvars, params, attributes);
</script>
</head>
<body>
<div id="myAlternativeContent">
<a href="http://www.adobe.com/go/getflashplayer_jp">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</body>
</html>
Lightbox用のライブラリを組み込み
上記のベースHTMLのheadセクションに、Lightbox動作のためのjsファイルとcssファイルを組み込む下記の記述を追加。
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Lightboxを起動させるJavaScriptメソッドを追加
Lightboxを直接起動させるJavaScriptのメソッドがないので、下記ページを参考にそのためのメソッドを追加。
Execute Lightbox Scripts From Flash at Codefidelity
（情報元：Flash から Lightbox を起動する方法 – minorio のプログラミング・メモ）
具体的に追加する内容は下記の通り。
<script type="text/javascript">
function LightboxDelegate(url,caption) {
var objLink = document.createElement('a');
objLink.setAttribute('href',url);
objLink.setAttribute('rel','lightbox');
objLink.setAttribute('title',caption);
Lightbox.prototype.start(objLink);
}
</script>
最終的にできあがったhtmlは下記の通り。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta http-equiv="Content-Script-Type" content="text/javascript;" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
//swfobject関係
var flashvars = {};
var params = {};
params.wmode = "transparent";
params.allowscriptaccess = "always";
var attributes = {};
swfobject.embedSWF("sample.swf", "myAlternativeContent", "600", "400", "9.0.0", false, flashvars, params, attributes);
//LightboxDelegate関係
function LightboxDelegate(url,caption) {
var objLink = document.createElement('a');
objLink.setAttribute('href',url);
objLink.setAttribute('rel','lightbox');
objLink.setAttribute('title',caption);
Lightbox.prototype.start(objLink);
}
</script>
</head>
<body>
<div id="myAlternativeContent">
<a href="http://www.adobe.com/go/getflashplayer_jp">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</body>
</html>
ExternalInterfaceで呼び出し
次はFlash側の用意。sample.flaというファイル（ActionScript3）を用意、ステージ上にボタン用のMovieClipインスタンスを３つ配置し、それぞれbtn0, btn1, btn2という名前を付ける。sample.flaのドキュメントクラスとしてSampleクラスを指定。Sample.asの内容は下記の通り。
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;
public class Sample extends MovieClip{
public function Sample() {
//Lightbox用の設定
lightboxArray = new Array();
lightboxArray[0] = {
src:"images/photo0.jpg",
caption:"写真その0"
};
lightboxArray[1] = {
src:"images/photo1.jpg",
caption:"写真その1"
};
lightboxArray[2] = {
src:"images/photo2.jpg",
caption:"写真その2"
};
//ボタンの設定
for (var i:uint = 0; i < 3; i++) {
var btn:MovieClip = this["btn" + i];
btn.id = i;
btn.buttonMode = true;
btn.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);
}
}
public var lightboxArray:Array;
public var btn0:MovieClip;
public var btn1:MovieClip;
public var btn2:MovieClip;
//ボタン用メソッド
public function onBtnClick(e:MouseEvent):void {
var btn:MovieClip = e.target as MovieClip;
var id:uint = btn.id;
var src:String = lightboxArray[id].src;
var caption:String = lightboxArray[id].caption;
//LightboxDelegateメソッドを呼び出し
ExternalInterface.call("LightboxDelegate",src,caption );
}
}
}
これで完成！
オマケ：IE7～8でのLightboxの表示バグフィックス
Lightboxを使った縦に長いページをIEで閲覧した場合、ページをスクロールしてからLightboxを起動すると、Lightboxの背景（黒い透過）部分が途中で切れてしまう。これを回避するためにとりあえずやったのがlightbox.cssの改造。具体的には#overlayのpositionをabsoluteからfixに変更（+IE6ではおかしくなってしまうので、スターハックを使ってabsoluteのまま）部分を下記のようにしました。
#overlay {
position: fixed;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
* html #overlay {
position: absolute;
}
以上、備忘録もかねて参考までに。
[...] http://www.tonpoo.com/blog/2009/12/flash-externalinterface-lightbox/ http://memo.kappa-lab.com/2009/05/flash_lightboxjs.html [...]
ピンバック by LightBoxとFlashをうまく使う方法 « sakaiden — 2010年6月18日 @ 3:10 AM
lightbox2を使用しているんですが、黒背景がページ下まで伸びずに、途中で切れてしまう、という現象に悩んでおりました。（↓この人みたいに）http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1153977086
途中のfloatが原因なのか、jsを他にも多数使用しているのが原因なのか、分かりかねていたところ、遂にこちらのページのオマケで解決しました！
ありがとうございます！
Comment by まつもと — 2012年2月22日 @ 12:35 PM
まつもとさん
コメントありがとうございましたー。
お役に立ててよかったです！
Comment by tonpoo — 2012年2月22日 @ 12:40 PM