動画も対象のLightbox系javascript「Mediabox」

Web2.0の象徴といえば画像をクールに表示できる「Lightbox」があります。
しかしLightboxでは画像のみが対象でした。
MediaboxはフラッシュはもちろんYouTubeなどの動画サイト、iflameまで表示できます。

使用方法
Mediaboxからダウンロードしたmediabox64.jsとmediabox.css、さらにmootools.jsをダウンロードします。
<link rel="stylesheet" href="http://yourdomain/mediabox.css" type="text/css" media="screen">
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>

<script src="http://yourdomain/mediabox64.js" type="text/javascript"></script>
＊swf形式を対象とする場合はswfobject.jsも必要になるようです。
最後に対象となるファイルを以下のよう指定すれば完成です。
<a href="対象URI" rel="mediabox[width height]">リンクテキスト</a>
動画も対象のLightbox系javascript「Mediabox」サンプル

2007年09月10日

前の記事：Dockメニューを実現するjavascript「iconDock」
次の記事：右クリックのオリジナルメニューを作成するjavascript「jQuery Halo Context Menu」

関連記事

• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• [mootools]mooVRotatingMenu
• 画面遷移せずにブックマークできるウィジェット「mooSocialize」
• [mootools]AJAX image crop

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」