LightBox風に動画を表示
aokiシステム開発担当の読です。
どこに行ってもサッカーの話でもちきりです。
小学校のスポーツ少年団の時に居た、サッカーをまるで知らない親御さん
のような人がたくさん居て、面白いですね。
このページでも採用されている、画像をかっこよく表示する「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[高さ 幅]」
と指定していたので、参考ページを見る際、注意してください。
と指定していたので、参考ページを見る際、注意してください。
