2008/11/26

Shadowbox.jsでLightboxのようにFlashファイルを表示する

ちとLightbox使おうとしていたら、画像じゃなくて簡単なFlashファイルを表示させたいということになりまして、LightboxでSWFはハンドルできないようなので、調べたところShadowbox.jsというのがありました。

Shadowbox.js Media Viewer

ヘッダにこんな感じで必要なスクリプトを読み込んで。

<script src="/js/navi.js" type="text/javascript"></script>
<link rel="stylesheet" href="../js/shadowbox/css/shadowbox.css" type="text/css" />
<script type="text/javascript" src="/js/prototype/prototype.js"></script>
<script type="text/javascript" src="/js/shadowbox/adapter/shadowbox-prototype.js"></script>
<script type="text/javascript" src="/js/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin(‘classic’, ‘/js/shadowbox/skin’);
Shadowbox.loadLanguage(‘en’, ‘/js/shadowbox/lang’);
Shadowbox.loadPlayer([‘swf’], ‘/js/shadowbox/player’);
window.onload = Shadowbox.init;
</script>

こんな感じで呼び出します。

<a href="swffile.swf" title="ファイルのタイトル" rel="shadowbox;height=690;width=600">ファイルへのリンク</a>

SWFファイル以外にも、そもそもがMedia Viewerということなので、色々扱えて便利です。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram

(2012-10-5)
売り上げランキング: 14,705
100円