mediaboxAdvanced
iaian7 » code » webcode John Einselen, 27.09.08Based on Slimbox and the Mootools javascript library, mediaboxAdvanced can handle your images, videos, animations, social video sites, inline elements, and external pages with ease.
A lightbox for any occasion
mediaboxAdvanced supports most online media formats, and anything not recognized is automatically contained within a dynamic frame, allowing you to open a lightbox-style overlay with anything inside. From JPEG images or flash videos, to PHP pages, mediaboxAdvanced can display your content in an elegant and easy-to-style overlay.
Based on Slimbox
Inheriting the foundation laid by Slimbox, mediaboxAdvanced boasts animations that are hard to break, keyboard navigation, valid CSS, and javascript accessibility.
Gallery sets
mediaboxAdvanced supports cross-media sets, allowing you to navigate from one item to another without closing the overlay. Images are preloaded dynamically as the viewer browses, while other media elements, often much larger, are loaded only when needed.
Titles and captions
Using title::caption notation, mediaboxAdvanced lets you set both a title and a caption, just a title, or leave the title attribute blank for elements you need left unlabelled, such as user interface elements.
Validates cleanly
It’s all valid XHTML, and if a user has javascript turned off, your links operate normally.
Important changes
The original Mediabox used rel="mediabox[...]" so as to play nicely alongside other lightbox-style scripts. I wanted a media script that could be paired with any other image-only script. Because mediaboxAdvanced is no longer a companion script, but a full media solution, the rel attribute has been changed back to "lightbox[...]" so as to maintain compatibility with the lightbox standard. Pages currently set up to use Mediabox will have to be changed, or you can edit the script yourself (simply replace “lightbox” with “mediabox” to match the desired behaviour).
The original Mediabox companion-style script will remain available for Mootools 1.11.
Media types and Examples
mediaboxAdvanced supports a wide range of media formats, and an even wider range of social media sites. Simply link to any image, flash video, or popular website, and the media will be automatically loaded into the overlay.
Images
Images contained in gallery sets are preloaded, even when the set contains mixed media types.
<a href="../media/mediabox/concrete.jpg" rel="lightbox[set1]" title="Concrete::taken in central Michigan"><img src="../media/mediabox/thumbs/concrete.jpg" alt="Concrete" class="lbThumb"/></a>
Social video links
<a href="http://www.flickr.com/photos/bhl1/2402027765/in/pool-video" rel="lightbox[social 400 300]" title="flickr.com">Flickr video »</a>
<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="lightbox[social 640 290]" title="video.google.com">Google video »</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://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://www.revver.com/video/758469/see-whats-possible-challenge/" rel="lightbox[480 392]" title="www.revver.com">Revver »</a>
<a href="http://seesmic.com/app?#/video/GtXGiBXzWb/watch" rel="lightbox[social 425 353]" title="www.seesmic.com">Seesmic »</a>
Tudou » (server can be very slow)
<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>
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= zlfKdbWwruY" 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://vimeo.com/877053" rel="lightbox[social 640 360]" title="vimeo.com">Vimeo »</a>
<a href="http://12seconds.tv/channel/GruvenReuven/28325" rel="lightbox[social 431 359]" 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://www.dailymotion.com/swf/1zR7vSr9sneRWgUqL" rel="lightbox[social 640 486]" title="www.dailymotion.com">DailyMotion »</a>
<a href="http://www.viddler.com/explore/clintus/videos/143/" rel="lightbox[social 437 370]" title="www.viddler.com">Viddler »</a>
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 Jeroen Wijering media player.
<a href="../media/mediabox/2007vfx.flv" rel="lightbox[flash 640 360]" title="FLV player::John Einselen - 2007 demo reel">FLV player »</a>
<a href="../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="../media/mediabox/TheISS2.mp3" rel="lightbox[audio 480 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.</span></div>
Because external links might also contain anchors, an inline content ID should 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 360]" title="movies.Yahoo.com">movies.Yahoo.com»</a>
<a href="http://www.engadget.com/" rel="lightbox[external 640 360]" 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.0 Beta (22kb)
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 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 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.
Troubleshooting
Most problems stem from the most basic of mistakes; a broken link in your header, or a mis-formatted link. Please make sure you’ve followed the directions, and if possible, open up the debugger that comes with your browser (Safari and FireFox both have decent error consoles) and see if you can track down the problem.
Here are some of the most common issues people have…
Mediabox doesn’t open
— Make sure the files are actually on the server where you think they are, then double check the links in your header. Using absolute links (“http://…”) may help sort out buggy relative paths.
— Make sure you’re only using scripts based on the Mootools library. Trying to run Mediabox+Mootools on a page that’s already using Jquery or Prototype will cause conflicts and prevent scripts from working.
Overlay opens but previous, next, and/or close links are missing
— See above. Recheck the header link for the css file.
— Double check the image links in the css file. Make sure the images are where you think they are.
The flash media player isn’t loading
— Make sure you’ve updated the Mediabox javascript file with the correct path to the JW player.
Things are visually messed up
— If you are using sIFR on your page, you’ll need to set the sWmode variable to “opaque” (thanks to Adam Messinger for the tip).
— Firefox often adds dotted lines around media elements when a viewer clicks or interacts; this can be fixed by adding
object#MediaboxSWF:focus { outline: transparent none; }in a CSS file (thanks to Adam Messinger for the tip).
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', '360 240')">Open HREF »</a>
<a href="" onclick="Mediabox.open('#mb_inline', 'javascript trigger', '360 240');return false;">Open onClick »</a>
Frames
Using javascript, you can access other frames on the page.
parent.Mediabox.open('url', 'title', 'width height');
Flash
CodeFidelity has posted an article describing how to link up anchor elements with flash clicks. It might prove helpful, but without any flash experience myself, I can’t say for sure.
Flash AS 3
Not yet tested. If you have an example of working code, please contact me.
Flash AS 2
Not yet tested. If you have an example of working code, please contact me.
Flex
flash.external.ExternalInterface.call(Mediabox:String[,'url', 'title', 'width height']):Object;
Not yet tested. If you have an example of working code, please contact me.
Known issues
mediaboxAdvanced has been tested on both Microsoft and Apple platforms with very few bugs.
OSX: Camino 1.6, Firefox 3, Safari 3.1, Stainless 0.1, Opera 9.6
Vista: Chrome b2200, Firefox 3, Internet Explorer 7, Opera 9.5, Safari 3
OS X known issues
Known issues will be posted here as soon as they are discovered. So far so good!
Windows known issues
— Viddler appears to have problems in Google Chrome.
— Internet Explorer 6 does not support opacity, nor transparent png images.
— Internet Explorer 7 has trouble with iFrame scrollbars loosing focus while scrolling content (typically sites with XHTML doctypes).
— Fullscreen mode in Flash appears to be problematic from time to time, including frozen video (IE7), locked screen commands (Chrome), and display errors (hiding content other than Flash). I’m not sure if this has anything to do with mediaboxAdvanced, or just a buggy flash plugin.
Version history
Source code with version history can be found in the Google Code repository.
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
Slimbox 1.64 — Christophe Beyls
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!
However, all questions or support requests must be posted to the Google discussion group. It’s open for anyone to join and start posting, so don’t feel shy! Sadly, questions or requests posted in the comments here 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. If you have a personal question or comment that’s not support related, you can always use the contact form on this site.
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!
awesome! thanks for refactoring this great script for mootools 1.2 
Awesome!! Thank you for the update!
Thanks for not forgetting this awesome update! Works like a charm they usually say! 
*that’s a very good thuff.I see that Mediabox is more stable than the ohter clones of lightbox.I tested that on IE6,Firefox3 and the last Opera.
Good work!!
First of all, thanks for the great script. It was exactly what I needed at just the right time.
I had some trouble with Mediabox in IE6 — the background was showing up as solid black. I think this was probably happening because lines 125-129 set the background opacity to 1 for that browser. Even with the transparent GIF background, this causes the background to appear solid in IE6.
I looked to the Slimbox code for a solution, since partial background transparency works okay in IE with that script. I discovered that Slimbox skips background images for the overlay, and just handles the transparency effect with MooTools. I commented out lines 125-129, and your script now works as expected for me.
Thanks again for this great utility.
Thank you for this incredible script!
Can you tell me if there is a way to set the buffer length when using it with Flash Video? Thanks in advance
ooops… nevermind! I now see the bit about posting questions in the google group. Thanks again!
Very nice! You can see an example of it here: http://www.project66.net/top-10-exercises-youre-not-doing/ Really slick! Would be nice if the it used jQuery instead of mootools though 
It would be nice if you would add a feature to load YouTube high quality videos.
The ordinary link should be:
http://www.youtube.com/watch?v=XXXXXXXXXXX&fmt=18
That way, if the user browser doesn’t work with the script it’ll load the site…
In embedding the “&ap=%2526fmt%3D18” needs to be added in value and source link parameter.
I tried to modify it myself but I’m doing something wrong. I’ll give it a go again these days
Hope you’ll solve this before me, I need it on one of the sites I’m working on.
Bottom control bar (buttons and title area) doesn’t shown correct at IE6 + high resolutions. It’s floating to right.
Very good script and mootools 1.2 support is a lifesaver Thanks
Great Stuff
looking forward to working with this
Regards
Kb