お洒落なホームページにはよく別窓でかっこよく画像を表示するLightBoxが使われています。しかし普通のLightBoxだと画像に限られてしまいます。
ところがこの「mediaboxAdvanced」は、画像だけでなく動画やYouTubeなどの動画サイト・Twitter・facebookなどのソーシャルビデオ、Flashメディア・Google Map・HTMLなど、ほとんどのオンラインメディアに対応して、LightBox風に表示してくれます。
サンプルを用意しました。
→ あらゆるメディアをLightBox風に表示させるJavaScript「mediaboxAdvanced」サンプルページ
では、この「mediaboxAdvanced」の使い方は続きをどうぞ。
１．まず次のスクリプトが必要となります。それぞれダウンロードします。
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ファイルを使用したい場合は必要となります。
２．次にCSSをダウンロードします。
mediaboxAdvanced css (black theme) 2.1 (3kb)
mediaboxAdvanced images (1kb, contains images for older browsers)
３．サーバーにアップロードします。
Webサーバーに、適切なフォルダを作成してそこにそれぞれファイルをコピーします。当然、ヘッダーで設定するリンクのパスと同じ必要があります。
（注意）ただマニュアルではこのように書いてあるのですが、ひとつひとつダウンロードしてきてアップするのは結構大変ですね。
こちらのGitHubからzipファイルをダウンロードして解凍するとdemoやsourceフォルダの中に必要なjsファイルやcss、ローディング用のイメージなどを見つけることができます。こちらを使用したほうが便利でした。
ファイルが揃ったら、コードを書いていきます。
<head>部分に
<link rel=”stylesheet” href=”ファイルのパス１/style.css” media=”screen” type=”text/css” />
<link rel=”stylesheet” href=”ファイルのパス２/mediaboxAdv-Dark.css” type=”text/css” media=”screen” />
<script src=”ファイルのパス３/mootools-core-1.3.2.js” type=”text/javascript”></script>
<script src=”ファイルのパス４/mediaboxAdv.js” type=”text/javascript”></script>
<script src=”ファイルのパス５/styleswitcher.js” type=”text/javascript”></script>
※cssは、GitHubからダウンロードしてきたファイルの中に、dark | light | minimal | smooth の４パターンのcssファイルが含まれていますので好きなのを選ぶことができます。
あとは、<body>部に以下のコードを記入するだけです。
たくさんのメディアに対応していますので、本家サンプルで使われているコードと共に列記しておきます。
Images
<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&source=s_q&hl=en&geocode=&q=detroit,+mi&aq=&sll=42.653,-83.14063&sspn=0.026765,0.024848&ie=UTF8&hq=&hnear=Detroit,+Wayne,+Michigan&z=10&ll=42.331427,-83.045754&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>
サンプルのソースを書いておきます。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>mediaboxAdvanced demo</title> <link rel="stylesheet" href="files/style.css" media="screen,projection" type="text/css" /> <link rel="stylesheet" href="files/mediaboxAdv-Dark.css" type="text/css" title="dark" media="screen,projection" /> <script src="files/mootools-core-1.3.2.js" type="text/javascript"></script> <script src="files/mediaboxAdv.js" type="text/javascript"></script> <script src="files/styleswitcher.js" type="text/javascript"></script> </head> <div id="page"> <h1>画像、動画、Google Map… あらゆるメディアをLightBox風に表示させるjQuery「mediaboxAdvanced」 サンプルページ</h1> <span style="float: none; "> <a href="files/image1.jpg" rel="lightbox[set1]" title="image1"><img src="files/image1thumb.jpg" alt="image1" width="70" height="70" /></a> <a href="files/image2.jpg" rel="lightbox[set1]" title="image2"><img src="files/image2thumb.jpg" alt="image2" width="70" height="70" /></a> <a href="files/cat.jpg" rel="lightbox[set10]" title="にゃんこ"><img src="files/catthumb.jpg" alt="cat" /></a> </span> <p><a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="lightbox[social]" title="video.google.com">Google video »</a></p> <p><a href="http://www.youtube.com/watch?v=rqg4Eun7fgs" rel="lightbox[social]" title="www.youtube.com">YouTube »</a></p> <p><a href="video.mp4" rel="lightbox[flash 640 360]" title="MP4 video::Funny_things_happening_with_women">MP4 video »</a></p> <p><a href="files/audio.mp3" rel="lightbox[audio 50% 20]" title="MP3 audio::The ISS #2 - John Einselen">MP3 audio »</a></p> <p><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></p> <p><a href="http://twitpic.com/99v0c3" rel="lightbox[twitter]" title="TwitPic">TwitPic »</a></p> <p><a href="http://twitvid.com/TSSRS" rel="lightbox[twitter]" title="TwitVid">TwitVid »</a></p> <p><a href="http://www.facebook.com/video/video.php?v=543650258685" rel="lightbox[social 756 424]" title="facebook.com">Facebook »</a> <p><a href="http://maps.google.co.jp/maps?hl=ja&ie=UTF8&t=m&brcurrent=3,0x60188ed6519eb29d:0x7eae6a97ce745cda,0&ll=35.7115,139.809694&spn=0.006098,0.00912&z=16&output=embed" rel="lightbox[external 640 360]" title="Google.com">Google map »</a></p> <p><a href="http://www.apple.com/jp/" rel="lightbox[external 80% 660]" title="apple.com">apple.com »</a></p> </body> </html> |
あわせてお読みください
jQuery Slider² 【注意】2019/10 こちらの記事は、古くなったため記事をリライトして引越ししいたしました。→ 最新の情報はこちらをご覧ください…
jQuery.mb.YTPlayer メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多い…
スマホやタブレットでメニューを表示させたいときに活用できるレスポンシブタイプのメニュー「Animated Border Menus 」を紹介します。 メニューア…
2013/06/05 at 10:28 AM
大変参考になる記事です！ありがとうございます！
こちらがどうしても動かないのですが、
特別に何もせず、こちらのコードのみで機能しますでしょうか。
MP4 video »
2013/06/05 at 1:30 PM
hayakawakeisuke様、コメントありがとうございます。
ちょっと調べてみましたが、パスを”files/video.mp4”ではなく、”video.mp4”にすると動くようです。
サンプルページで使用しているmp4の動画を表示させるコードは、以下の通りです。動画のファイル名は「video.mp4」です。
サンプルでもmp4ファイルはfilesフォルダに存在しています。
それにも関わらず、何故かパスを張るとその動画がみつからないというエラーがでます。何故かは今のところ不明です。
2013/07/05 at 11:56 AM
すみません！コメントが遅れました。
コメントありがとうございます。
結果、私のところで反映されなかったのは、
filesフォルダにNonverBlaster.swf
が入っていなかった為でした。。。。
mp4を参照はNonverBlaster.swfを基準にしていると思います。
試しにcssフォルダにmp4をいれ、
href=”../css/video.mp4″
としたところ動作を確認しましたー。
2013/07/05 at 3:00 PM
貴重な情報をありがとうございました！