MediaboxAdvanced

John EinselenがLightbox, Slimbox, Mootools javascript libraryをもとに作成した MediaboxAdvanced1.3.4を改変した。Mootool最新バージョンは1.3.2だが、ここでは1.2.5を使っている。フラッシュスキンにはNonverBlasterおよびJWMediaplayer5.6を採用した。

2011年5月の時点でポピュラーだったFlashベースで作成したが、iPhone/iPadでは動かなかった。Android2.x スマホではWindowsと同じように動いた。2012年からはmp4(H.264/AAC)を標準に使うようにした。スクリプトの変更なしに動いた。
Android4.xからFlashが動作しなくなったので、動画再生用には jQueryプラグインのFlowplayerを採用した。→mediabox2

JR東海テレビCM

動画ファイルをURL指定するとローカルで再生できない。表示サイズのデフォールト値は640x360に設定した。mediaboxAdv-1.3.4.jsで変更できる。
※JW Media Playerを使うときは useNB: false とする。
※player.swfパスは呼び出し元からの相対アドレスにする。

画面サイズ960x540

飛鳥篇

2007vfx

Blue Monster

 

写真の表示

001
002
003
004
005

Inline Content

ここをクリックすると同じページに隠された部分(display:none)を表示される。表示する部分divのid名は、mm_で始まっている必要がある。

外部ファイルの参照

〔例〕Google地図 ※ 地図のURLではなく、埋め込み用HTMLコードにあるURLにリンクする。

変更点と留意事項

  1. mediaboxAdv-1.3.4.js, mootools-1.2.5.js, quickie.js を統合してmediabox.jsとした。mediaboxAdv-1.3.4.jsを最初に書くと機能しない。
  2. 動画と写真が混在できる。上記の最後の写真は動画とおなじグループ。
  3. ポップアップサイズは[]の中で指定できる。写真はウィンドウサイズ以内に自動調整される。
    ※imagePadding: 100 でウィンドウのオフセットを設定する。80にした。
    ※imgBackground: true (mediaboxAdvanced.js 77行目)にすると元のサイズで表示される。
  4. lightbox.jsと区別するためにrel="lightbox"となっていたのをrel="mediabox"に変更した。
  5. スタイルはmediaboxAdvBlack21.cssを採用。改変してmediabox.cssとした。
  6. mediaplayer.swfにした。mediabox.jsでのパスを変更する。
  7. オフラインで再生するときは、Flash player security settings を開き、動画ファイルが保存されているフォルダーにアクセスする許可を与える。
  8. JWplayerpath:(mediabox.js4544行目)を絶対アドレスで指定したとき、相対アドレス指定のローカルファイルをオフラインで再生できない。呼出し元からのmediaplayerへのパスを指定する。
〔初版:2011年5月18日 更新:2013年11月5日〕