写真と動画の両方をポップアップ表示できる。Lightbox, Slimbox, Mootools javascript libraryをもとにJohn Einselenが作成したMediaboxAdvanced1.3.4を改変した。Mootool最新バージョンは1.3.2だが、ここでは1.2.5を使っている。

  • rel="lightbox[set]" を rel="mediabox[set]" に変更(古いlightboxとの競合を避けるため)
  • 前後の写真・動画に移動するアイコンを追加
  • 表示画面の左右をクリックして前後に移動できるように改変
  • デフォールト画面の大きさをHD比率の960x540に設定
  • mootools-1.2.5-core.jsとmediaboxAdv-1.3.4b.jsを統合してmediabox.jsとした。
    ※mootoolsの内容を先に記述しないと動作しない。
  • スタイルにはmediaboxAdvBlack21.cssを採用
〔例1〕 NonverBlaster player使用
<script type="text/javascript" src="/script/mediabox.js"></script>
<a href="/video/001.mp4" rel="mediabox[mp4]"><img src="/video/001.jpg" /></a>
001

ひまわり H.264/mp4

001

Discovery H.264/mp4

 
〔例2〕 Facebook動画
<a href="http://www.facebook.com/video/video.php?v=10151269089983794" rel="mediabox[social 756 424]" title="facebook.com">Facebook動画</a>
〔例3〕 YouTube video
<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="mediabox[video 640 360]" title="Microsoft Blue Monster">YouTube video</a>

BACK | BLOG | CLOSE