トップページ > Ajaxライブラリ使用サンプル集 > MediaBoxでファイル表示
Ajaxライブラリ使用サンプル集
MediaBoxでファイル表示
MediaBoxは、John Einselen氏作の、Slimbox と Mootools をベースにしたライブラリ。
Lightbox風だが、MediaBoxは画像だけでなく、HTMLコンテンツ（インラインコンテンツも含む）や、YouTubeなどのソーシャルビデオ、QuickTimeムービーやFlashファイルも表示できる。
MediaBoxサンプル
●HTMLファイル（コンテンツ）→ Google.com●インラインコンテンツ → inline content
●YouTube → YouTube
●QuickTime Movie → QuickTime Movie （一部ブラウザで表示されないようです。）
●flash video → FLV player
●flash animation → SWF animation
●画像表示 ↓
左の画像 をクリックすると、単独でスムーズに拡大表示する
下の3つの画像はグループに指定。「next」「previous」ボタンで操作できる。
MediaBoxのダウンロード
MediaBox Advancedのサイトから「mediaboxAdv99f.js」とスタイルシートのセット「mediaboxAdvancedStyles」をダウンロードする。さらに MooTools 1.2.2 をダウンロード。
ヘッド部に下記のように読み込ませる。パスは自分のサイトに合わせる。<script src="../js/mootools-1.2.2-core-yc.js" type="text/javascript"></script>
<script src="../js/swfobject.js" type="text/javascript"></script> ←flash関連ファイルの表示の時のみ必要
<script src="../js/mediaboxAdv99f.js" type="text/javascript"></script>
flash関連のファイル（ swf, flv, mp4, mp3(audio) ）に使用したい時は「swfobject.js」も必要。
JW Media Player か
NonverBlaster からダウンロードする。
NonverBlaster の方が “simpler, cleaner alternative” だが「does not support MP3 and AAC files - only FLV and MP4.」だそうなので注意。
jsファイルの編集 - （flash関連で使う時のみ）
「JW FLV Player」の場合は「player.swf」が、「NonverBlaster」なら 「NonverBlaster.swf」が一緒にダウンロードされる。これをflash関連ファイルの表示に使うので、サーバに入れておくこと。
そして、このプレーヤーのパスを「mediabox」の js ファイルに書いてやる必要がある。「mediaboxAdv99f.js」をエディタで開き、比較的上の方（でも80〜90行目あたり）に「//JW Media Player settings and options」というコメントがあるので、 その部分に「player.swf」のパスを書く。
「NonverBlaster.swf」のパスを書く部分は、そのすぐ下の方にある。
playerpath: '../js/player.swf', // Path to the mediaplayer.swf or flvplayer.swf file
backcolor: '000000', // Base color for the controller, color name / hex value (0x000000)
frontcolor: '999999', // Text and button color for the controller, color name / hex value (0x000000)
lightcolor: '000000', // Rollover color for the controller, color name / hex value (0x000000)
screencolor: '000000', // Rollover color for the controller, color name / hex value (0x000000)
controlbar: 'over', // bottom, over, none (this setting is ignored when playing audio files)
// NonverBlaster
useNB: true, // use NonverBlaster in place of the JW Media Player for .flv and .mp4 files
NBpath: '../js/NonverBlaster.swf', // Path to NonverBlaster.swf
NBloop: 'true', // Loop video playback, true / false
controllerColor: '0x777777', // set the controlbar colour
showTimecode: 'false', // turn timecode display off or on
セッティング
ここまで準備できたら、あとは表示したいファイルをリンクして行く。
前バージョンでは「 rel="mediabox [...] " 」と書いていたのが、「 rel="lightbox [...] " 」としたそうだ。lightboxと紛らわしいな。
基本的に、[ ] 内のテキストが同じだとグループ化される（「next」「previous」ボタンが出る）。
「 title 」はMediaBox表示時のコメントになる。
テキスト or 画像 </a>
[ ] 内は [ set ]。同じ名前だとグループ化。グループをわけるには [ set1 ] [ set2 ]と数字を加える。
テキスト or 画像 </a>
[ ] 内は [ social 横サイズ 縦サイズ ] 。
同じ名前だとグループ化。グループをわけるには [ social1 ] [ social2 ]と数字を加える。
テキスト or 画像 </a>
[ ] 内は [ flash 横サイズ 縦サイズ ] 。
同じ名前だとグループ化。グループをわけるには [ flash1 ] [ flash2 ]と数字を加える。
テキスト or 画像 </a>
[ ] 内は [ inline 横サイズ 縦サイズ ] 。サイズは％でも指定できる。
同じ名前だとグループ化。グループをわけるには [ inline1 ] [ inline2 ]と数字を加える。
テキスト or 画像 </a>
[ ] 内は [ inline 横サイズ 縦サイズ ] 。サイズは％でも指定できる。
同じ名前だとグループ化。グループをわけるには [ inline1 ] [ inline2 ]と数字を加える。
「display: none;」にしたインラインコンテンツに#ID名を付けておく。