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
<!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>