動画やWebページをクリックで表示するLightbox系javascript「Mediabox」

1. ダウンロードしたmediaboxを解凍して、
　mediabox.js, mediabox.css, mootools.js, and swfobject.js などを、ページヘッダーに配置します。
　JS/CSSファイルのパスは、置いた場所により適宜変更します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
・・・
<link rel="stylesheet" href="./css/mediabox.css" type="text/css" media="screen">

<script src="./js/mootools-v1-11.js" type="text/javascript"></script>
<script src="./js/mediabox.js" type="text/javascript"></script>
<script src="./js/swfobject.js" type="text/javascript"></script>

</head>

mediaboxは、ローカルテスト用のアーカイブを使用すると一括でダウンロードできます。
≫ダウンロード（一括ダウンロードの直リンク）。
mediabox関連ファイルを個別にダウンロードしたい場合は、mediaboxサイトでできます。
mediabox.cssは、画像のURLを持っています（imagesフォルダ参照）。カレントパスに修正します。
DOCTYPEは、例のように書きます。

2. リンクの方法

　動画などを再生させるためリンクは簡単です。リンクの形式には、AタグまたはJavascriptを用いる２つの方法があります。

<a href="link url" rel="mediabox[width height]" title="title" >link text</a>


<a href="javascript:Mediabox.open('link url', 'title', 'mediabox[width height]')">Click Here</a>


<body onload="Mediabox.open('link url', 'title', 'mediabox[width height]')" >

link url：リンクのURL。動画サイトの動画URL、自分のサイトにアップした動画（SWF,FLV,MOV,WMV)のURL、
WebサイトのURL、ページ内のリンクIDなどを指定します。
width height：width横の長さとheight縦の長さ（ピクセル）を半角スペースで区切り、指定します。
ポップアップ画面のスクリーンの大きさ。
title：任意のタイトルを書けます。

例：

<a href="http://www.youtube.com/watch?v=ul7XSQPGGo4" rel="mediabox[480 380]" title="YouTube 私の未来のだんな様">


<a href="../video/FLV-2007vfx.flv" rel="mediabox[640 360]" title="FLV">


<a href="http://urbanqee.com/aflac/asfwaltz_pv300k.wmv" rel="mediabox[640 480]" title="WMV アヒルの学校">


<a href="http://www.yahoo.co.jp/" rel="mediabox[640 480]" title="HP Yahoo!">

【留意事項】

Myspaceは、動画のURLをつぎのように修正して使用します。（表示不能となりました 2010.4.23）

http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoid=102187376
                                   ↓修正
http://myspacetv.com/index.cfm?fuseaction=vids.individual&videoid=102187376

・play myspace ≫http://myspacetv.com/index.cfm?fuseaction=vids.individual&videoid=102187376

Veohは、link URLをつぎのように修正して使用します。

http://www.veoh.com/browse/videos/category/anime/watch/v19812840RJJbn9k5
                                  ↓修正
http://www.veoh.com/videos/v19812840RJJbn9k5
           
・play Veoh ≫http://www.veoh.com/videos/v19734309bJkQ5hX7

DailyMotionは、embed codeのURLを使用します。

<div><object width="420" height="339"><param name="movie" value="http://www.dailymotion.com/swf/x2edp7" />
<param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" />
<embed src="http://www.dailymotion.com/swf/x2edp7" type="application/x-shockwave-flash" width="420" height="339" 
allowFullScreen="true" allowScriptAccess="always"></embed></object>・・・略</div>
                  ↓URLをそのまま使用
http://www.dailymotion.com/swf/x2edp7
           
・play dailymotion ≫http://www.dailymotion.com/swf/x2edp7

Mediaboxは、iaian7.comから必要なファイルをダウンロードできます。
Mediaboxページ：http://iaian7.com/webcode/Mediabox

mediabox.js, mediabox.css,mediaboxImagesファイル
mootools.js, swfobject.js
slimbox.js など

必要なファイルを個別にダウンロードすると、mootools.jsが上手く動作しない場合があるので、
ローカルテスト用のアーカイブをダウンロードすると便利です。どうも、mootools.jsのバージョンがV1.2だと使えないらしい？

Mediaboxページの「Installation」内のtest setupをクリックすると、必要なファイルを一括してダウンロードできます。

ローカルテスト用のアーカイブにはつぎのファイルが含まれています。(こちらのmootools.jsのバージョンはV1.1)

\mediabox72\mediabox72
  |---[css]
  |      |---mediabox.css
  |
  |---[images]
  |---[js]
  |     |---mediabox.js
  |     |---mootools.v1.11.js
  |     |---swfobject.js

①YouTube	②SWF	③FLV	④Quick Time mov	⑤Windows Media player wmv
⑥Flickr video	⑦MetaCafe	⑧Veoh	⑨HP Yahoo!	ページ内の <DIV>タグの内容を表示する。・・・・・ ⑩HP inline content

No	ビューアー	JSフレームワーク	画像	動画*1	動画共有サイト動画	Webページ	スライドシュー	備考
1	Lightbox	Prototype	●				●
2	Pirobox	jQuery	●				●	推奨
3	Videobox	mootools			●
4	Mediabox	mootools		●	●	●
5	Shadowbox	Prototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、 Yahoo! User Interface Library、 Ext (requires ext-core.js)、非JSフレームを選択可	●	●	●	●	●*2	推奨

Mediabox サンプル