Mediabox Advanced 1.3.4(2011年4月現在)

Mediabox Advancedは、画像やHTML、各種ビデオなど、さまざまなメディアをLightbox風に表示することのできるJavaScriptライブラリです。
主な特長は以下です。

サポートしている主なメディアタイプは以下のとおりです。詳細は開発元のiaian7をご覧ください。

名称
Mediabox Advanced 1.3.4b
開発元
iaian7
必要なモジュール
MooTools
動作確認済みブラウザ(このページで紹介しているデモのみ)
Mac:Firefox 3.6.16, Safari 5.0.4, Google Chrome 10.0.648.204, Opera 10.10
Win:IE 7, 8, Firefox 3.6.12/4.0, Safari 4.0.4, Google Chrome 10.0.648.204, Opera 10.54, IE 6(IETester)
ライセンス
MIT License

デモ

開発元のiaian7に各メディアタイプのデモがありますが、ここではFlashビデオの設置方法を紹介します。

下の2つのビデオはグループ化しています。再生するとウィンドウ内に[<<][>>]ボタンが表示され、ウィンドウを閉じることなく前のビデオ、次のビデオを表示することができます。

また下記にYouTubeやPhoto、HTML、Inline contentのデモQuickTimeのデモも記載しています。

ダウンロード

開発元から以下をダウンロードします。

MooToolsが必須で、Flashビデオ(FLV or MP4)を再生させる場合はJW Media Player または NonverBlasterが必要です。

※NonverBlasterのほうがシンプルでcommercial licensingも必要ないのでおススメです。

設置方法

  1. 各ファイルのパスは、以下の場合で説明します。
    [設置フォルダ]
     ├ index.htm
     ├ movie1.flv
     ├ movie2.flv
     └ [mediabox]
       ├ mootools-1.2.5-core-yc.js
       ├ mediaboxAdv-1.3.4b.js
       ├ mediaboxAdvBlack21.css
       ├ NonverBlaster.swf
       └ [images]
         ├ 50.gif
         └ 以下省略
  2. NonverBlasterはダウンロード/解凍後、「examples」フォルダ内の「NonverBlaster.swf」のみをアップロードします。
  3. mediaboxAdvBlack21.cssに記述されている画像のパスを変更します。
    "/images/mediabox/"とルートからのパスになっているので、上記ディレクトリ構成の場合は"./images/"またはimages/となります。
  4. mediaboxAdv-1.3.4b.jsに記述されているNonverBlaster.swfのパスを変更します。
    105行目の
    NBpath: '/js/NonverBlaster.swf',	// Path to NonverBlaster.swf
    NBpath: './mediabox/NonverBlaster.swf',	// Path to NonverBlaster.swf
    と、 FLVファイルからの相対パス FLVファイルを読み込むHTMLファイルからの相対パスに変更します。
    ここでは相対パスにしましたが、サイト内にmediaboxを一つだけ設置し、HTMLは色々なディレクトリに設置する場合は絶対パス( /で始まるパス URL)にしたほうがいいでしょう。
    ※上記間違いを修正しました(2010.4.13)。Shoulder.jpさん、ありがとうございました。
  5. FLVファイルを読み込むHTMLファイルのHEAD要素内に以下を記述します。
    <link rel="stylesheet" href="mediabox/mediaboxAdvBlack21.css" media="screen" />
    	<script src="mediabox/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
    	<script src="mediabox/mediaboxAdv-1.3.4b.js" type="text/javascript"></script>
  6. BODY要素内にビデオファイルへのリンクを記述します。
    <p><a href="billiard.flv" rel="lightbox[flash 320 240]" title="ビリヤード">ビリヤード</a></p>
  7. rel="lightbox[flash 320 240]"のそれぞれの値は以下の意味を持ちます。
    lightbox
    mediaboxで再生したい場合に必ず記述します。省略できません。
    flash
    複数の動画をグループ化する場合に設定します。
    グループ化すると上記デモのように再生ウィンドウに[<<][>>]ボタンが表示され、ウィンドウを閉じることなく切り換えることができます。
    グループ化せずに一つだけ再生させる場合は省略できます。
    グループ名には任意の文字列を設定できます。
    [320 240]
    再生するビデオの幅と高さです。
  8. title属性に設定した値は、再生ウィンドウにビデオタイトルとして表示されます。
    実体参照を使ってtitle属性内にHTMLを記述することもできます。
    例えば
    title="キートンHPに&lt;a href="http://www.keyton-co.jp/&quot;&gt;リンク&lt;/a&gt;"
    と記述することもできます。
    サンプル

Flashビデオ以外のデモ

YouTube ≫
<a href="http://www.youtube.com/watch?v=jfA954iGDPs" rel="lightbox[demo 480 380]" title="www.youtube.com">YouTube ≫</a>
YouTube HQ ≫
<a href="http://www.youtube.com/watch?v=kLXzxAb-B4Q" rel="lightbox[demo 640 385]" title="www.youtube.com">YouTube HQ ≫</a>
Photo ≫
<a href="../demo14/slides/photo1.jpg" rel="lightbox[demo]" title="毛馬こうもん">Photo ≫</a>
HTML ≫
<a href="http://www.museum.kyoto-u.ac.jp/" rel="lightbox[demo 640 360]" title="京都大学総合博物館">HTML ≫</a>
Inline content ≫
<a href="#mb_dl" rel="lightbox[demo 360 180]" title="">inline content ≫</a>

QuickTime

Mediabox Advanced Ver. 1.2.0 からQuickTime( .mov, .m4v, .m4a, 他)がサポートされました。
マルチプラットフォームというわけにはいかず、Flashよりも動作プラットフォームは少ないですが、一般的によい品質とレスポンスで動作します。

QuickTimeデモ
中之島図書館ウォールタペストリー

設置方法

  1. MooToolsプラグインのQuickieをダウンロードします。
  2. ダウンロードした圧縮ファイルを解凍し、Quickie.jsのみをサーバにアップロードします。
  3. QuickTimeを再生したいHTMLファイルのHEAD要素内にQuickie.jsのパスを記述します。
    MooTools.js、mediaboxAdv-1.3.4b.jsの後に記述してください。
    <script src="mediabox/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
    	<script src="mediabox/mediaboxAdv-1.3.4b.js" type="text/javascript"></script>
    	<script src="mediabox/Quickie.js" type="text/javascript"></script>
  4. BODY要素内にビデオファイルへのリンクを記述します。
    <p><a href="WallTapestry.mov" rel="lightbox[qt 320 240]" title="中之島図書館ウォールタペストリー">中之島図書館ウォールタペストリー</a></p>
  5. IE用にHEAD要素内に以下を記述します。
    このオブジェクトは、IEにQuickTime DOMイベントを発生させるために必要で、JavaScript Scripting Guide for QuickTimeに詳しく書かれています。(Quickieのダウンロードページより)
    <!--[if IE]>
    	<object id="qt_event_source" classid="clsid:CB927D12-4FF7-4a9e-A169-56E4B8A75598"
    	codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=7,2,1,0"></object>
    	<![endif]-->
Ver.1.3.4bに更新
Quicktimeのデモと設置方法を追加
Ver.1.1.7から1.2.0に更新
公開日

ページトップに戻る