2010年06月29日

LightBox風に動画を表示

システム開発担当の読です。

どこに行ってもサッカーの話でもちきりです。
小学校のスポーツ少年団の時に居た、サッカーをまるで知らない親御さん
のような人がたくさん居て、面白いですね。

このページでも採用されている、画像をかっこよく表示する「Lightbox」
私も個人でページを作っているので、かなり重宝しているのですが、
「Lightbox」では動画は対応していないようなので、探してみると、
「VideoBox」と「MediaBox」というライブラリがありました。

「VideoBox」はFlashムービーのみの表示しか行えないので
「MediaBox」を使用した動画表示を紹介したいと思います。

MediaBoxの導入

こちらのページより、以下の画像の赤い囲みのファイルをダウンロードしてください。

ダウンロードした状態では「mediaboxAdvanced Image Pack」の中身が「images/画像」となっているため「images/mediabox/画像」となるように、フォルダを作成しておいてください。

※「mediaboxAdvBlack.css」の中で「images/mediabox/」と指定されているため（「mediaboxAdvBlack.css」を変更しても可能）

MediaBoxの使用

以下の例のように入力するだけで、使用可能です。。。簡単ですね。

<head>
　<link rel="stylesheet" href="mediaboxAdvBlack.cssの場所" type="text/css" />
　<script type="text/javascript" src="mootools-1.2.4-core-yc.jsの場所"></script>
　<script type="text/javascript" src="mediaboxAdv-1.2.4.jsの場所"></script>
</head>
<body>
　動画を「LightBox」の効果で表示する。<br />
　<a href="動画ファイル場所" rel="lightbox[高さ　幅]">サンプル１</a>
</body>

「lightbox[高さ　幅]」ですが、昔のバージョンでは「mediabox[高さ　幅]」
と指定していたので、参考ページを見る際、注意してください。

Permalink: http://www.hos.co.jp/blog/20100629/
Last modified: 2010 年 6 月 29 日 9:39 AM

※ 開発者ブログの内容は無保証です。製品のユーザサポート対象ではありません。ご了承ください。