LightBoxをFlashから呼出す方法 （csslab.cl）
ブログなどで最近よく LightBoxで写真を表示していますね。 LightBox.jsを利用することでスライドショーのように写真を見せることができます。
しかし、FlashコンテンツがLight Boxの前面に出てしまう為うまく表示できません、csslabでサンプルと共に回避策の説明があります。
HTML中のFlashオブジェクトの部分に以下を追加することできちんと表示されるようになります。
<object ... wmode="transparent">
<param name="wmode" value="transparent">
Flash（swf）からLightBoxを表示する方法は、以下のようにします。
// Flash内部でのActionScript
on (press) {
getURL("javascript:show(1)");
}
HTML側にLight Boxを呼出すfanctionを記述します。
// Flashのon pressで呼出される
<script type="text/javascript">
function show(image) {
var a = document.getElementById("ancoraggio"+image+"");
var f = new Array()
img_url[1] = "images/image-1.jpg";
img_url[2] = "images/image-2.jpg";
img_url[3] = "images/image-3.jpg";
img_url[4] = "images/image-4.jpg";
var url = img_url[image];
a.setAttribute('href', url);
myLightbox.start(a);
}
</script>
実際に wmode="transparent" の記述があれば、問題なく表示されます。
用意したサンプルでは、複数の画像セットをFlashコンテンツからキャプション付きで表示するようにしてありますので参考にしてください。
サイトの最新情報をRSSで受信できます
- csslab.cl - FlashとLight Box併用時の表示問題回避http://www.csslab.cl/2006/09/01/lightbox-swf/
- Lightbox .js v2.0http://www.huddletogether.com/projects/lightbox2/
- サンプルのダウンロードhttp://youmos.com/sample/lightbox_swf/lightbox_swf.zip
