Videoboxを使う

それでは実際にVideoboxを使ってみましょう。ここではmovieフォルダに再生するFlashムービーを入れてあります。css、js、swfフォルダはVideoboxのデータを解凍したものを、そのまま利用しています。(cssフォルダ内のThumbs.dbは不要ですので削除しても問題ありません。)

本書の構成図

Videoboxはエフェクト処理にMooToolsライブラリを使用しています(*2)。このライブラリはVideoboxをダウンロードすると一式で入っていますので、新たにダウンロードする必要はありません。Videoboxを使用するにはMooToolsとFlash表示ライブラリを先に読み込ませる必要があります。

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>

これら2つのライブラリを読み込ませたらVideoboxのスクリプトを読み込ませます。

<script type="text/javascript" src="js/videobox.js"></script>

Videoboxを使う場合にはスタイルシートファイルも読み込ませる必要があります。このファイルはlightbox.cssで以下のようにして読み込ませます。

<link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen">

これでVideoboxを利用する準備が完了です。それでは実際のHTMLコードを見ていきます。VideoboxではリンクがクリックされるとFlashムービーをページ内にエフェクト付きで表示します。この設定は以下のように<a>タグのrel属性でvidboxの文字を指定するだけです。キャプションは<a>タグのtitle属性で指定することができます(サンプル01)。指定する文字はvidboxでありvideoboxではない点には注意してください。

サンプル01の実行結果

ムービーが表示される

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen">
        <script type="text/javascript" src="js/mootools.js"></script>
        <script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript" src="js/videobox.js"></script>
        <title>Videoboxサンプル</title>
    </head>
    <body>
    <h1>Videoboxサンプル</h1>
        <div>
            <a href="movie/sample1.swf" rel="vidbox" title="文字が回転します">サンプル映像</a>
        </div>
    </body>
</html>