mediaboxAdvanced Demo
iaian7 » code » webcode John Einselen, 16.02.09 [edit]Based on Slimbox and the Mootools javascript library, mediaboxAdvanced can handle your images, videos, animations, social video sites, inline elements, and external pages with ease.
Jump to:
Introduction | Examples | Installation | Scripting | Troubleshooting | Support
Images
Images contained in gallery sets are preloaded, even when the set contains mixed media types.
<a href="http://iaian7.com/media/mediabox/concrete.jpg" rel="lightbox[set1]" title="Concrete::taken in central Michigan"><img src="http://iaian7.com/media/mediabox/thumbs/concrete.jpg" alt="Concrete" class="lbThumb"/></a>
As of version 0.9.9, mediaboxAdvanced will also weed out identical links in the same set. Multiple links to the same item will be combined, using settings from the first link (title, width, and height).
Social video links
Please note: width and height are not required for social video links, but can be still be defined if you want to override the defaults (especially useful when videos don’t fit the typical aspect ratio of a given site).
<a href="http://www.facebook.com/video/video.php?v=47157459019" rel="lightbox[social]" title="facebook.com">Facebook »</a>
mediaboxAdvanced is set up to accept both
...v=47157459019and...v=47157459019&subj=72053641URL formats (or anything else after an ampersand sign). Please note that privacy settings apply! If a video is not public, the general public will not be able to view it.
<a href="http://www.flickr.com/photos/bhl1/2402027765/in/pool-video" rel="lightbox[social 400 300]" title="flickr.com">Flickr video »</a>
(1.0 release)
(1.0 release)
<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="lightbox[social 640 290]" title="video.google.com">Google video »</a>
(1.0 release)
<a href="http://megavideo.com/?v=WD28NSRM" rel="lightbox[social]" title="megavideo.com">Megavideo »</a>
<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>
<a href="http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoid=23472681" rel="lightbox[social set3 430 346]" title="vids.myspace.com">vids.MySpace »</a>
<a href="http://myspacetv.com/index.cfm?fuseaction=vids.individual&videoid=23472681" rel="lightbox[social 430 346]" title="myspacetv.com">MySpaceTV »</a>
<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>
<a href="http://quietube.com/v.php/http://vimeo.com/2295261" rel="lightbox[social 480 392]" title="quietube.com">Quietube + Vimeo »</a>
Quietube.com is a site designed to strip away the clutter of a few popular social video sites – if you’re concerned about the quality of user experience sans-javascript, when mediaboxAdvanced would not intercept links, this may be a good option. Right-click the above links to open in a new tab, and see for yourself.
<a href="http://www.revver.com/video/758469/see-whats-possible-challenge/" rel="lightbox[social 480 392]" title="www.revver.com">Revver »</a>
<a href="http://rutube.ru/tracks/732179.html?v=31d844c852720c85a74d55474dd3f65a" rel="lightbox[social]" title="www.RuTube.ru">RuTube »</a>
<a href="http://seesmic.com/app?#/video/GtXGiBXzWb/watch" rel="lightbox[social 425 353]" title="www.seesmic.com">Seesmic »</a>
<a href="http://www.tudou.com/programs/view/KG2UG_U4DMY/" rel="lightbox[social 400 340]" title="www.tudou.com">Tudou »</a>
<a href="http://v.youku.com/v_show/id_XNDI1MDkyMDQ" rel="lightbox[social 480 400]" title="www.youku.com">YouKu »</a>
<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="lightbox[social 480 380]" title="www.youtube.com">YouTube »</a>
<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>
To embed using one of the higher quality YouTube streams, you’ll need to append a format code to your URL or set a default quality setting in the script options. The HD video format (
&fmt=22) does not deprecate to a lower format automatically, so please make sure any videos embedded with this quality setting are actually available in HD. High quality videos (&fmt=18) will default to the lower quality if HQ isn’t available, which makes it a little more reliable (besides streaming faster than HD). MediaboxAdvanced will override the script’s quality option with any manually appended format numbers, so both methods can be used on a website.
YouTube HQ » (via options)
<a href="http://www.youtube.com/watch?v= 2_HXUhShhmY" rel="lightbox[social 640 385]" title="www.youtube.com">YouTube HQ »</a>
YouTube HD » (via url code)
<a href="http://www.youtube.com/watch?v=L5Nu8bo2d-o&fmt=22" rel="lightbox[social 960 565]" title="www.youtube.com">YouTube HD »</a>
<a href="http://www.veoh.com/videos/v753286qccrGhsT" rel="lightbox[social 540 438]" title="www.veoh.com">Veoh »</a>
<a href="http://www.viddyou.com/viddstream?videoid=49456" rel="lightbox[social]" title="viddyou.com">Viddyou »</a>
<a href="http://vimeo.com/877053" rel="lightbox[social 640 360]" title="vimeo.com">Vimeo »</a>
<a href="http://12seconds.tv/channel/Iaian7/81432" rel="lightbox[social]" title="12seconds.tv">12seconds.tv »</a>
Social video embed links
Because some social video sites do not use the media ID in the page URL, you have to use the link given in the embed code. Be forewarned that this is both more difficult (you must dig through the embed code to find the link) and does not deprecate nicely (without javascript, the links will point to the video player, not the video page).
<a href="http://blip.tv/play/Ae2bN420ZA" rel="lightbox[social 640 390]" title="blip.tv::John Einselen - 2008 demo reel preview">Blip.tv »</a>
(1.0 release)
Break.com uses an inconsistent URL scheme – sometimes the 6-digit video ID is present in the page URL, but most of the time it is only present in the embed code. So long as the URL contains the 6-digit code, mediaboxAdvanced will be able to load the video.
<a href="http://www.dailymotion.com/swf/1zR7vSr9sneRWgUqL" rel="lightbox[social 640 486]" title="www.dailymotion.com">DailyMotion »</a>
(1.0 release)
<a href="http://www.viddler.com/player/d4cf1bc/" rel="lightbox[social 545 451]" title="www.viddler.com">Viddler »</a>
New media
Flash animation
<a href="http://www.homestarrunner.com/sbemailtwohundred.swf" rel="lightbox[flash 550 410]" title="SWF animation::HomestarRunner.com flash animation">SWF animation »</a>
Flash video
FLV and MP4 video are played using the NonverBlaster or Jeroen Wijering Media Player.
<a href="http://iaian7.com/media/mediabox/2007vfx.flv" rel="lightbox[flash 640 360]" title="FLV player::John Einselen - 2007 demo reel">FLV player »</a>
<a href="http://iaian7.com/media/mediabox/2005vfx.mp4" rel="lightbox[flash 640 360]" title="MP4 player::John Einselen - 2005 demo reel">MP4 player »</a>
Flash audio
MP3 and AAC files can also be played using the Jeroen Media Player.
<a href="http://iaian7.com/media/mediabox/TheISS2.mp3" rel="lightbox[audio 50% 20]" title="MP3 audio::The ISS #2 - John Einselen">MP3 audio »</a>
Inline content
Using an anchor tag, Mediabox can insert html found elsewhere on your page. This circumvents many of the associated issues with Ajax – when accessing hidden inline content, Mediabox both accommodates for deprecation (if javascript is turned off, the inline content is not hidden, and the anchor links work normally), and for accessibility and search engine optimisation (your content is always available for non-visual browser systems).
<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="javascript:Mediabox.close();">close via javascript »</a></span></div>
Because external links might also contain anchors, any inline content ID must use the mb_ prefix to make sure Mediabox knows to load it from the current page.
External content
HTML files, PHP, ASP, and any other web document format will be displayed inside a dynamic frame.
<a href="http://www.google.com" rel="lightbox[external 640 360]" title="Google.com">Google.com»</a>
<a href="http://movies.yahoo.com" rel="lightbox[external 640 50%]" title="movies.Yahoo.com">movies.Yahoo.com»</a>
<a href="http://www.engadget.com/" rel="lightbox[external 640 80%]" title="Engadget.com">Engadget.com»</a>
Installation and requirements
Depending on what you want to use it for, mediaboxAdvanced requires very few files, and minimal setup. Follow these simple directions to get it up and running on your site in minutes.
1 – Download Scripts
mediaboxAdvanced version 0.9.9g Beta (28kb)
Mootools 1.2.1 (57kb for the core)
JW Media Player
or
NonverBlaster
NonverBlaster is a simpler, cleaner alternative to the JW Media Player, and has no “commercial” licensing requirements. However, users should note that NonverBlaster does not support MP3 and AAC files – only FLV and MP4.
mediaboxAdvanced is distributed under the MIT license, and is free for use, abuse, and complete modification. Enjoy! However, the software is released without warranty, and the author(s) retain no responsibility for damages, acts of God, spontaneous combustion, or technical support. I’ll do my best to help when I get the time, but can’t promise anything.
2 – Download Styles
3 – Copy
Copy the files to your web server, and into the appropriate folders (usually /js, /css, and /images).
4 – Edit
From your server, open up the mediaboxAdvanced javascript file in a text or code editor, and update the preferences to reflect your desired settings. Make sure you update the file path to the JW media player with the correct path to your server.
Other preferences to keep an eye on are the default overlay width and height, and the Revver affiliate ID, which allows you to generate revenue based on ad views through the Revver videos you link too.
Do the same for the CSS file, updating the image links to point to the correct images hosted on your server.
5 – Header
Now that your files are ready to go, add the appropriate links to your page header. This may be different based on your content management system, but most let you set up custom header content.
<link rel="stylesheet" href="../css/mediaboxAdvBlack.css" type="text/css" media="screen" /> <script src="../js/mootools12.js" type="text/javascript"></script> <script src="../js/mediaboxAdv.js" type="text/javascript"></script>
Please edit the links to match your server setup. The styling may not work correctly without a proper xhtml transitional DOCTYPE. Check out w3.org for more information.
6 – Link
All that’s left is to test a link! Go ahead and try a simple YouTube video, using the code below.
<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="lightbox[set 480 380]" title="Blue Monster::3D animation - John Einselen">play video</a>
The set, width, and height are technically optional. Pleast note that trying to use width and height without a set will actually create a set based on the width value, grouping the content with any other set-less content that have the same width. Width and Height can also use percentages, but neither make any difference on images because the image size is read directly from the file.
Scripting and link alternatives
If you need to customise the code, mediaboxAdvanced may appear daunting if you’re new to javascript. Give it time. Look over the comments in the code, and check out how media types have been added. You should be able to add your own with minimal trouble.
If you implement a media type you think could be included in the next version of mediaboxAdvanced, contact me and let me know. Please remember that when implementing plugin-based media (quicktime, windows media, divx, etc.), a basic plugin check should be performed to alert viewers if they don’t have the proper software installed.
In addition to the anchor tag, you can also create a Mediabox overlay via javascript, from within other frames, flash based websites, even flex.
Javascript
Mediabox.open('url', 'title', 'width height');
A group of elements can be loaded by defining an array of objects, followed by an index number (0 = first element).
Mediabox.open([['url1', 'title1', 'width height'], ['url2', 'title2', 'width height'], ['url3', 'title3', 'width height']], index);
<a href="javascript:Mediabox.open('#mb_inline', 'javascript trigger', '640 120')">Open HREF »</a>
<a href="" onclick="Mediabox.open('#mb_inline', 'javascript trigger', '360 180');return false;">Open onClick »</a>
Close via javascript »
<a href="javascript:Mediabox.close();">Close via javascript »</a>
Version history
Source code with version history can be found in the Google Code repository.
v0.9.9g — Added Viddyou support and new YouTube options
v0.9.9f — Added Facebook video support
v0.9.9e — Added YouTube playlist support (and yes, running out of numbers)
v0.9.9d — Fixed auto play for Metacafe, MySpace, Revver, and Vimeo
v0.9.9c — Added Megavideo and Quietube support, fixed NonverBlaster loop
v.0.9.9b — Added Blip.tv support and removed IE6 transparency hack
v0.9.9 — Duplicate link consolidation, added key option, fixed javascript API
v0.9.8 — Added NonverBlaster (JW alternative) and RuTube.ru support
v0.9.7c — Fixed background colour options on several social media formats
v0.9.7b — Fixed IE support, streamlined Gecko detection
v0.9.7 — Added default sizes for social media and percentage support
v0.9.5 — Fixed Viddler support, fixed captions
v0.9.4 — Added Tudou and YouKu support
v0.9.2 — Added YouTube quality settings, better Viddler support
v0.9.0 — Fixed non-numeric set error
v0.8.9 — Fixed javascript API (both single and multiple)
v0.8.8 — Added flash plugin check and error routine
v0.8.7 — Fixed FireFox / Camino flash errors
v0.8.6 — Fixed IE6 errors
v0.8.4 — Added preferences for applicable media types
v0.8.2 — Updated CSS and redid display organization
v0.8.0 — First public testing
v0.7.8 — Cleaned up operatives
v0.7.6 — First private release
Credits
Framework:
Slimbox 1.64 — Christophe Beyls
Pieces:
Yosha (API support)
Robert Jandreu (Megavideo support)
(if you contributed code to this project and I’ve missed your name, please let me know!)
Comments and Support
Feel free to leave comments below. I love to hear about sites that use mediaboxAdvanced, and from people that find it helpful! You can also promote mediaboxAdvanced by posting a link back here (http://tr.im/mbAdvanced is an easy link), and recommending it to your friends.
However, all questions or support requests must be posted to the Google discussion group. It’s open for anyone to join and start posting. When posting to the Google discussion group, please remember to include a link to an online example of the problem, steps to reproduce the issue, and relevant information such as operating system and browser version. Thank you!
Just a friendly reminder, questions or requests posted in the comments below will have to be removed. The comment system is simply not set up for use as a discussion board, and we both waste time and energy trying to use it as such.
