画像、動画、Googleマップ… あらゆるメディアをLightBox(ライトボックス)風に表示させる「mediaboxAdvanced」

mediaboxAdvanced

お洒落なホームページにはよく別窓でかっこよく画像を表示するLightBoxが使われています。しかし普通のLightBoxだと画像に限られてしまいます。

ところがこの「mediaboxAdvanced」は、画像だけでなく動画やYouTubeなどの動画サイト・Twitter・facebookなどのソーシャルビデオ、Flashメディア・Google Map・HTMLなど、ほとんどのオンラインメディアに対応して、LightBox風に表示してくれます。

サンプルを用意しました。

→ あらゆるメディアをLightBox風に表示させるJavaScript「mediaboxAdvanced」サンプルページ

では、この「mediaboxAdvanced」の使い方は続きをどうぞ。


1.まず次のスクリプトが必要となります。それぞれダウンロードします。

mediaboxAdvanced 1.3.4b (42kb, compressible to 22kb)

Mootools 1.2.x Core (65kb)

JW Media Player または NonverBlaster
※NonverBlasterのほうがJW Media Playerに比べて、シンプルで広告も入らないので良さそうです。ダウンロードして解凍するとNonverBlaster.swfというファイルが examples folderのなかにあります。

Quickie.js
※QuickTimeファイルを使用したい場合は必要となります。

2.次にCSSをダウンロードします。

mediaboxAdvanced css (black theme) 2.1 (3kb)

mediaboxAdvanced images (1kb, contains images for older browsers)

3.サーバーにアップロードします。

Webサーバーに、適切なフォルダを作成してそこにそれぞれファイルをコピーします。当然、ヘッダーで設定するリンクのパスと同じ必要があります。

(注意)ただマニュアルではこのように書いてあるのですが、ひとつひとつダウンロードしてきてアップするのは結構大変ですね。

こちらのGitHubからzipファイルをダウンロードして解凍するとdemoやsourceフォルダの中に必要なjsファイルやcss、ローディング用のイメージなどを見つけることができます。こちらを使用したほうが便利でした。

ファイルが揃ったら、コードを書いていきます。

<head>部分に

<link rel=”stylesheet” href=”ファイルのパス1/style.css” media=”screen” type=”text/css” />
<link rel=”stylesheet” href=”ファイルのパス2/mediaboxAdv-Dark.css” type=”text/css” media=”screen” />
<script src=”ファイルのパス3/mootools-core-1.3.2.js” type=”text/javascript”></script>
<script src=”ファイルのパス4/mediaboxAdv.js” type=”text/javascript”></script>
<script src=”ファイルのパス5/styleswitcher.js” type=”text/javascript”></script>

※cssは、GitHubからダウンロードしてきたファイルの中に、dark | light | minimal | smooth の4パターンのcssファイルが含まれていますので好きなのを選ぶことができます。

あとは、<body>部に以下のコードを記入するだけです。
たくさんのメディアに対応していますので、本家サンプルで使われているコードと共に列記しておきます。

Images

ConcreteNature1Nature2Nature3Concretewindow

<a href="イメージファイル名.jpg" rel="lightbox[set1]" title="キャプチャー用テキスト"><img src="サムネイル用イメージファイル名.jpg" alt="テキスト"/></a>

Twitter media

Twitcam »

<a href="http://twitcam.com/118d" rel="lightbox[twitter]" title="Twitcam">Twitcam »</a>

TweetMic»

<a href="http://tweetmic.com/p/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic long url">TweetMic»</a>

Tmic.FM »

<a href="http://tmic.fm/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic short url">Tmic.FM »</a>

TwitPic »

<a href="http://twitpic.com/8fc41" rel="lightbox[twitter]" title="TwitPic">TwitPic »</a>

TwitVid »

<a href="http://www.twitvid.com/5N35X" rel="lightbox[twitter]" title="TwitVid">TwitVid »</a>

Yfrog image »

<a href="http://yfrog.com/4et9zpj" rel="lightbox[twitter]" title="Yfrog image::Photo by John Einselen">Yfrog image »</a>

Yfrog video »

<a href="http://yfrog.us/0ia9mcz" rel="lightbox[twitter]" title="Yfrog video">Yfrog video »</a>

Social video

Facebook »

<a href="http://www.facebook.com/video/video.php?v=543650258685" rel="lightbox[social 756 424]" title="facebook.com">Facebook »</a>

Flickr video »

<a href="http://www.flickr.com/photos/bhl1/2402027765/in/pool-video" rel="lightbox[social 400 300]" title="flickr.com">Flickr video »</a>

GameTrailers.com player »

<a href="http://www.gametrailers.com/player/49936.html" rel="lightbox[social]" title="gametrailers.com/player/">GameTrailers.com player »</a>

GameTrailers.com video »

<a href="http://www.gametrailers.com/video/e3-09-assassins-creed/50139" rel="lightbox[social]" title="gametrailers.com/video/">GameTrailers.com video »</a>

Google video »

<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="lightbox[social 640 290]" title="video.google.com">Google video »</a>

Megavideo »

<a href="http://megavideo.com/?v=WD28NSRM" rel="lightbox[social]" title="megavideo.com">Megavideo »</a>

MetaCafe »

<a href="http://www.metacafe.com/watch/2185365/spot_electrabel_gdf_suez_happy_new_year_2009/" rel="lightbox[social 400 350]" title="www.metacafe.com">MetaCafe »</a>

Quietube + Youtube »

<a href="http://quietube.com/v.php/http://www.youtube.com/watch?v=b5Ff2X_3P_4" rel="lightbox[social 480 392]" title="youtube via quietube.com">Quietube + Youtube »</a>

Quietube + Vimeo »

<a href="http://quietube.com/v.php/http://vimeo.com/2295261" rel="lightbox[social 480 392]" title="quietube.com">Quietube + Vimeo »</a>

Revver »

<a href="http://www.revver.com/video/758469/see-whats-possible-challenge/" rel="lightbox[social 480 392]" title="www.revver.com">Revver »</a>

RuTube »

<a href="http://rutube.ru/tracks/732179.html?v=31d844c852720c85a74d55474dd3f65a" rel="lightbox[social]" title="www.RuTube.ru">RuTube »</a>

Tudou »

<a href="http://www.tudou.com/programs/view/KG2UG_U4DMY/" rel="lightbox[social 400 340]" title="www.tudou.com">Tudou »</a>

YouKu »

<a href="http://v.youku.com/v_show/id_XNDI1MDkyMDQ" rel="lightbox[social 480 400]" title="www.youku.com">YouKu »</a>

YouTube »

<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="lightbox[social]" title="www.youtube.com">YouTube »</a>

YouTube Playlist »

<a href="http://www.youtube.com/view_play_list?p=63F0C78739B09958" rel="lightbox[social]" title="www.youtube.com playlist::hover over the window to see everything in the play queue">YouTube Playlist »</a>

Veoh »

<a href="http://www.veoh.com/browse/videos/category/scifi_and_fantasy/watch/v20072707NWacjBq6" rel="lightbox[social 540 438]" title="www.veoh.com">Veoh »</a>

Vimeo »

<a href="http://vimeo.com/877053" rel="lightbox[social]" title="vimeo.com">Vimeo »</a>

Social video embed

Blip.tv »

<a href="http://blip.tv/play/Ae2bN420ZA" rel="lightbox[social 640 390]" title="blip.tv::John Einselen - 2008 demo reel preview">Blip.tv »</a>

Break.com »

<a href="http://www.break.com/usercontent/2009/4/The-Wonderful-World-of-Reals-703500.html" rel="lightbox[social]" title="break.com">Break.com »</a>

DailyMotion »

<a href="http://www.dailymotion.com/swf/1zR7vSr9sneRWgUqL" rel="lightbox[social 640 486]" title="www.dailymotion.com">DailyMotion »</a>

vids.MySpace »

<a href="http://mediaservices.myspace.com/services/media/embed.aspx/m=100005440,t=1,mt=video" rel="lightbox[social set3 430 346]" title="vids.myspace.com">vids.MySpace »</a>

Ustream.tv »

<a href="http://www.ustream.tv/flash/live/534892" rel="lightbox[social 400 326]" title="Ustream.tv">Ustream.tv »</a>

Viddler »

<a href="http://www.viddler.com/player/d4cf1bc/" rel="lightbox[social 545 451]" title="www.viddler.com">Viddler »</a>

Flash media

SWF animation »

<a href="http://www.homestarrunner.com/sbemailtwohundred.swf" rel="lightbox[flash 550 410]" title="SWF animation::HomestarRunner.com flash animation">SWF animation »</a>

MP4 video »

<a href="files/video.mp4" rel="lightbox[flash 640 360]" title="MP4 video::John Einselen - 2005 demo reel">MP4 video »</a>

MP3 audio »

<a href="files/audio.mp3" rel="lightbox" title="MP3 audio::The ISS #2 - John Einselen">MP3 audio »</a>

Inline content

inline content »

<a href="#mb_inline" rel="lightbox[inline 360 180]" title="">inline content »</a>

<div id="mb_inline" style="display: none;"> <span style="color: #999999; text-align: center;">This is an example of content that was hidden on the page, and opened in Mediabox using an anchor link.<br/><br/> <a href="" onclick="Mediabox.close();return false;">close onClick »</a></span></div>

External content

HTML , PHP, ASPなどで作られたページにも対応しています。

Google map »

<a href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=detroit,+mi&amp;aq=&amp;sll=42.653,-83.14063&amp;sspn=0.026765,0.024848&amp;ie=UTF8&amp;hq=&amp;hnear=Detroit,+Wayne,+Michigan&amp;z=10&amp;ll=42.331427,-83.045754&amp;output=embed" rel="lightbox[external 640 360]" title="Google.com">Google map »</a>

movies.Yahoo.com »

<a href="http://movies.yahoo.com" rel="lightbox[external 640 50%]" title="movies.Yahoo.com">movies.Yahoo.com »</a>

Vectorform.com »

<a href="http://vectorform.com/" rel="lightbox[external 80% 660]" title="Vectorform.com">Vectorform.com »</a>

サンプルのソースを書いておきます。どうぞご参考まで。


あわせてお読みください

4 Comments

  1. 大変参考になる記事です!ありがとうございます!

    こちらがどうしても動かないのですが、
    特別に何もせず、こちらのコードのみで機能しますでしょうか。
    MP4 video »

    <a href="files/video.mp4" title="MP4 video::John Einselen - 2005 demo reel" rel="nofollow">MP4 video »</a>
    • ぱんにゃっと

      2013/06/05 at 1:30 PM

      hayakawakeisuke様、コメントありがとうございます。
      ちょっと調べてみましたが、パスを”files/video.mp4”ではなく、”video.mp4”にすると動くようです。

      サンプルページで使用しているmp4の動画を表示させるコードは、以下の通りです。動画のファイル名は「video.mp4」です。

      <a href="video.mp4" rel="lightbox[flash 640 360]" title="MP4 video::Funny_things_happening_with_women">MP4 video ≫</a>
      

      サンプルでもmp4ファイルはfilesフォルダに存在しています。
      それにも関わらず、何故かパスを張るとその動画がみつからないというエラーがでます。何故かは今のところ不明です。

      • hayakawakeisuke

        2013/07/05 at 11:56 AM

        すみません!コメントが遅れました。
        コメントありがとうございます。

        結果、私のところで反映されなかったのは、
        filesフォルダにNonverBlaster.swf
        が入っていなかった為でした。。。。
        mp4を参照はNonverBlaster.swfを基準にしていると思います。
        試しにcssフォルダにmp4をいれ、
        href=”../css/video.mp4″
        としたところ動作を確認しましたー。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です