- 2008年10月23日 (木)
- Tweet
Shadowbox.jsでブログのSWFをLightbox的な表示にしてみたよ
Shadowbox.jsを入れてブログ内のFlashをLightbox.js風な画面内ポップアップするようにしました。今までは別ページ(_blank)でSWFを表示させていましたが、無駄にページ遷移する必要がなくなります。
サンプルはこちら。Lightbox.jsのref=”lightbox”と互換性があるのもいい感じです。
Shadowboxを導入するに当たって
当ブログはiPhone等の様々なデバイスに対応させるため、「ページにFlashを埋め込まない」というフラッシャーにとって背反するポリシーのもと運営してますが、shadowboxであれば妥協してもいいかと思い導入しました。wmodeにも変な値が入っていないのでまったく許せます。
またFlashの画角(サイズ)を720×480にしています。この画角は学生時代に映像やっていたこだわりで、ビデオのDVから横幅・縦幅の引用しています。いつかデモをビデオにまとめることがあったら画角が統一されていると便利、という理由もあったりします。
2008年10月23日(木) 14:23
余計なお世話だとは思いますが、DVの720*480はソースクリップのピクセルアスペクト比が0.9の時のみ使用出来ます。
Flashコンテンツなどはピクセルアスペクト比が1です。さらに、Flashなどはピクセルアスペクト比を変更出来ないので、NTSCのSDサイズにこだわるのでしたら、上記のコンテンツサイズは640*480にした方がよいかとおもいますよ。
2008年10月23日(木) 18:20
ご指摘ありがとうございます。アスペクト比のことは把握していますが(こちらのことですよね)、あくまでサンプルのサイズを揃えておきたいということで上記にしているつもりです。実際にはサイズは可変レイアウトにしてますので、もしも作ることがあったらその都度再生サイズを調整するつもりです。
2010年10月29日(金) 23:08
いつも興味深く拝見させていただいております。
このたび、こちらの記事、および他のサイトなどでも調べてshadowbox.jsを導入することにしたのですが、swfからshadowboxを起動したところ、そのswfが消えてしまいました。以前lightboxでも似たような現象に遭遇し、wmodeをいじって直した記憶があったため、jsの中身を色々のぞいて調べてみたのですが、目ぼしいプロパティが見当たらず、無理やりパラメタを埋め込んだりもしてみたのですが、解決できませんでした。ちょうど以下のブログと同じ現象だと思われます。http://slave020611.blogspot.com/2009/05/shadowbox.html
この現象について何かご存知でしたら、ご教示願えないでしょうか？よろしくお願いします。
2010年10月30日(土) 15:18
shadowboxを起動するときに、HTMLにエンベッドされたswfのCSSをdisplay:noneに一時的に書き換えているからと思いましたが、いかがでしょうか？
2010年10月31日(日) 01:03
ご返信ありがとうございます。
shadowbox.cssの中のdisplayを探って、noneの記述のある怪しい部分を削除してみたのですが、やはり無理でした。
ただYasu様の助言を元にembedが怪しいことがわかりましたので、ためしにwmvをembedしてみたらやはり消えました。
なのでshadowbox.jsの中の
troubleElements:[“select”,”object”,”embed”,”canvas”]};
のembedを削除してみたところswfが消えずに表示されました。その代わりshadowboxのレイヤーの上にswfが表示されたので、wmodeにtransparentを指定してやることで正常に動くようになりました。
troubleElementsというのがいかにもな名前ですね。ここに記述のあるタグは消されるっぽいです。このshadowboxの仕様は無理やりすぎる気がします…。
Yasu様のおかげで何とか解決することが出来ました！本当にありがとうございます。