mediaboxAdvanced
iaian7 » code » webcode John Einselen, 28.09.09 (updated 2.02.10)Based on Lightbox, Slimbox, and the Mootools javascript library, mediaboxAdvanced is a modal overlay that can handle images, videos, animations, social video sites, twitter media links, inline elements, and external pages with ease.
mediaboxAdvanced 1.2.0 adds support for Quicktime file formats via Quickie.js, fixes single rel=“lightbox” (setless/optionless) usage, color and volume settings, percentage calculations, and image resizing. Available for download now in the installation section.
Introduction | Examples | Installation | Scripting | Troubleshooting | Support
Introduction
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 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.
CSS3 support
Elements have been designed with CSS3 effects in mind, making it a cinch to apply rounded corners, shadows, image based borders, or anything else you could want! For those worried about speed, the style sheet includes rules applied only during animation; by default, shadows are turned off while elements scale.
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.
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 | Twitter | Social Video | Flash media | Quicktime | Inline | HTML
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 eastern Michigan"><img src="/media/mediabox/thumbs/concrete.jpg" alt="Concrete" class="lbThumb"/></a>
You can include links in a title by encoding HTML characters using their entity name. < = < > = > " = "
<a href="/media/mediabox/window.jpg" rel="lightbox" title="Window::taken in <a href="http://www.cityofwabash.com/" title="cityofwabash.com" target="_blank">Wabash, Indiana</a>" class="an7_thumb"><img src="/media/mediabox/thumbs/window.jpg" alt="window" /></a>
mediaboxAdvanced will also weed out identical links in a set. Links to the same URL, be it an image, social video, media, or website, will be combined using the settings from the first of the identical links (title, width, and height). Open any of the below duplicate images, and they will link to the original image from the gallery above, including the correct position in the set.
You can choose how images should be embedded; as a CSS background (imgBackground: true), which makes it harder for visitors to rip off images, or as an IMG tag (imgBackground: false), which can automatically scale images for smaller screens. While I’ve added click protection to the IMG embed option, Opera does not allow javascript to disable the right click context menu. All other browsers have image dragging and right clicking disabled. While this does not protect your images from truly determined users, it should discourage the vast majority from ripping off your files.
Page links are also automatically protected, with the context menu turned off, further protecting image files from rampaging downloaders. Same as for the IMG tag click protection, this works in all browsers except Opera.
Twitter media
<a href="http://twitcam.com/118d" rel="lightbox[twitter]" title="Twitcam">Twitcam »</a>
<a href="http://tweetmic.com/p/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic long url">TweetMic»</a>
<a href="http://tmic.fm/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic short url">Tmic.FM »</a>
<a href="http://twitpic.com/8fc41" rel="lightbox[twitter]" title="TwitPic">TwitPic »</a>
<a href="http://www.twitvid.com/3717D" rel="lightbox[twitter]" title="TwitVid">TwitVid »</a>
<a href="http://twitvid.io/acDU" rel="lightbox[twitter]" title="TwitVid.io">TwitVid.io »</a>
<a href="http://yfrog.com/4et9zpj" rel="lightbox[twitter]" title="Yfrog image::Photo by John Einselen">Yfrog image »</a>
<a href="http://yfrog.us/0ia9mcz" rel="lightbox[twitter]" title="Yfrog video">Yfrog video »</a>
Social video
Width and height settings are not required for social video links, but can be still be defined if you want to override the defaults. This can be especially useful when videos don’t fit the typical aspect ratio of a given site, or if you want to fit the scale to a specific site layout.
<a href="http://www.facebook.com/video/video.php?v=543650258685" rel="lightbox[social 756 424]" title="facebook.com">Facebook »</a>
mediaboxAdvanced accepts both
...v= 543650258685and...v= 543650258685&subj=72053641URL formats. 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>
<a href="http://geovideos.fliggo.com/video/fqSStugR" rel="lightbox[social]" title="Fliggo">Fliggo »</a>
<a href="http://www.gametrailers.com/player/49936.html" rel="lightbox[social]" title="gametrailers.com/player/">GameTrailers.com player »</a>
<a href="http://www.gametrailers.com/video/e3-09-assassins-creed/50139" rel="lightbox[social]" title="gametrailers.com/video/">GameTrailers.com 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://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=22does 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=18will 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
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>
<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>
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>
<a href="http://www.ustream.tv/flash/live/534892" rel="lightbox[social 400 326]" title="Ustream.tv">Ustream.tv »</a>
<a href="http://www.viddler.com/player/d4cf1bc/" rel="lightbox[social 545 451]" title="www.viddler.com">Viddler »</a>
Flash media
SWF files will be embedded directly using the flash player.
<a href="http://www.homestarrunner.com/sbemailtwohundred.swf" rel="lightbox[flash 550 410]" title="SWF animation::HomestarRunner.com flash animation">SWF animation »</a>
FLV, MP4, and MP3 files can be played using either NonverBlaster:Hover or the JW Media Player. Given the install base for Flash, this is typically the most reliable way of playing media files.
<a href="/media/mediabox/2007vfx.flv" rel="lightbox[flash 640 360]" title="FLV video::John Einselen - 2007 demo reel">FLV video »</a>
<a href="/media/mediabox/2005vfx.mp4" rel="lightbox[flash 640 360]" title="MP4 video::John Einselen - 2005 demo reel">MP4 video »</a>
<a href="/media/mediabox/TheISS2.mp3" rel="lightbox[audio 50% 20]" title="MP3 audio::The ISS #2 - John Einselen">MP3 audio »</a>
Quicktime
Files playable with Quicktime (.mov, ,m4v, .m4a, and many others) can use the native QT browser plugin if the MooTools plugin Quickie.js is installed (separate installation, see the download section for more). The overlay height is automatically adjusted to include the 16px controller. Plugin detection is not easily possible on multiple platforms, so this is a less forgiving solution than Flash, but typically far better quality and responsiveness on machines running OSX.
Some errors of note: Opera does not play well with Quicktime on any platform, and Chrome for Mac may not display the controller.
mediaboxAdvanced version 1.2.0 – not yet released.
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 can accommodate both 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="" onclick="Mediabox.close();return false;">close onClick »</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.
There is one major caveat to this method – the keyboard commands that navigate through a gallery (“p” for previous, etc.) will interrupt typing into text fields. Near the top of the options list, you’ll find a setting for stopKey – set this to false to override the default settings. This does not prevent the key commands from initially affecting the overlay, however (typing “tax” into a search field for example, will close the overlay). To change the default keyboard shortcut controls for gallery content (removing the alphabetical entries such as “x,” “c,” “p,” and “n”), you can edit the keycodes listed under the keyDown function (further down in the script). Ultimately, the most stable route is to use external page content when loading forms, as iFrame embedding prevent the overlay (parent frame) key commands from interfering with the form (child frame) inputs. Read on for details…
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 1.2.0 (40kb, compressible to 20kb)
Mootools 1.2.4 Core (65kb)
While the full Mootools library is the best bet, JSON, Cookie, and the Request section are not required by mediaboxAdvanced. Building a custom library with only the required components can shave the total required size down to 57Kb.
JW Media Player or NonverBlaster
NonverBlaster is a simpler, cleaner alternative to the JW Media Player, and has no commercial licensing requirements. Once downloaded and unzipped, you’ll find NonverBlaster.swf in the examples folder.
To use Quicktime files, you need to upload Quickie.js to your server and put a link in the page header. Check out the download page for more information.
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.
Because of the necessary customisations required by mediaboxAdvanced, I cannot offer pre-compressed versions (which would make it much more difficult to set up script preferences). However, once you have the full script set up and working on your website, online compression tools such as yui.2clics.net can help minimise final script size, speeding up load time for your visitors. Typical compression ratio is 50%.
2 – Download Styles
mediaboxAdvanced Image Pack (contains images for black, minimal, and white themes)
When making your own variations, pay attention to the notes throughout the CSS file. For example, the rules for #mbCenter.mbLoading are only applied during animations, so browser responsiveness can be fine tuned by setting or unsetting CSS3 effects there.
3 – Upload to Server
Copy the files to your web server, and into the appropriate folders (often /js, /css, and /images). It’s imperative that links added in the header can point to the correct locations; no specific path is required, so long as you know where all the files are.
4 – Edit
From your server, open up the mediaboxAdvanced javascript file in a text or code editor, and update the options 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/mootools-1.2.3-core.js" type="text/javascript"></script> <script src="/js/mediaboxAdv-1.1.1.js" type="text/javascript"></script>
Please edit the links to match your server setup. Also note that 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 largely 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.
Just to clarify a point of common confusion – it is not required that you define a gallery set! The examples on this site are labelled lightbox[image...] or lightbox[social...] just to organise the samples into galleries. It has no impact on how a link is formatted or embedded (for example, linking to YouTube will still open the video, regardless of the gallery you put it in – the gallery set does not define the media type, the script will always discover media type based on the URL given).
7 – Enjoy!
You can put a link to 
mediaboxAdvanced in your site footer;
<a href="http://iaian7.com/webcode/mediaboxAdvanced"><img src="/images/webcode/mediaboxAdv/mediaboxAdvIcon.png" style="vertical-align: middle; margin-top: -2px;" alt="mediaboxAdvanced" /> mediaboxAdvanced</a>
Or become a fan on Facebook.
Post any bugs or issues you come across to the Google Group, not the comments below. I encourage you to test out features and bang around a bit on it; if something isn’t working, please let me know the OS platform, browser, media type, and an online example of the problem.
Other Tutorials
Send me your blog posts, tutorials, or other content, I’d be happy to list them here! Please note that I’ve unfortunately lost a good portion of links, many for previous versions of mediaboxAdvanced. Let me know of any updates, and ones that I’m missing (especially if they were listed here previously!).
Rapid-Ideas.com [English] has an article on using mediaboxAdvanced with RapidWeaver.
Enric of Sonic Byte [Spanish] has written up a tutorial on customising mediaboxAdvanced, and using it along with the Mootools Wordpress plugin.
Jan Jonas [German] has provided German localisations for mediaboxAdvanced 1.1.7 and several themes. You can get the details and downloads from his website.
Dominik [German] has posted a tutorial on how to use mediaboxAdvanced with NextGen Gallery and Wordpress.
Cheon Nii [Japanese] has posted a Wordpress plugin using mediaboxAdvanced overlays.
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="" onclick="Mediabox.open('#mb_inline', 'javascript trigger', '360 180');return false;">Open onClick »</a>
Close onClick »
<a href="" onclick="Mediabox.close();return false;">Close onClick »</a>
Another element can be opened in the same overlay simply by adding a javascript link; mediaboxAdvanced will leave the overlay open and transition to the new element.
Internet Explorer compatibility
Unfortunately, the onclick event is not supported in many versions of IE. Thanks to Calvin Williams, the following should work:
<a href="javascript:this.onclick(Mediabox.open('#mb_inline', 'IE compatible event', '360 180'));" >Open onClick »</a>
I have not had the greatest luck with this solution, as it triggers errors in some tests I’ve run. It will require testing on your site before public deployment.
href="javascript:Mediabox... may also work, but triggers bugs in Firefox, Opera, and Internet Explorer (simply using periods and other entities in the title field can crash javascript in these browsers); this method is not recommended.
Ajax
When an Ajax request is completed, the page will need to be scanned for the new links. Add the following function call to an onLoad, onComplete, or similar Ajax event:
Mediabox.scanPage();
Manually re-scan page » (click here after the thumbnails have loaded)
Frames
Using the above javascript API, you can also access mediaboxAdvanced from other frames on the page.
parent.Mediabox.open('url', 'title', 'width height');
This allows you to open and close a mediaboxAdvanced overlay from any frame, in any frame (the above example would, from within a child frame, open an overlay in the parent frame – keep in mind that mediaboxAdvanced needs to be running in the frame that receives the javascript call, not the one that sends it).
Flash
CodeFidelity has posted an article describing how to link anchor elements in flash, which may prove helpful.
Flash Action Script 2
flash.external.ExternalInterface.call("Mediabox.open ('NurseBlueBg.swf', 'Test', '235 350')");(thanks to Nate M.)
Flash Action Script 3
ExternalInterface.call("Mediabox.open('NurseBlueBg.swf', 'Test', '480 380')");(thanks to Nate M.)
Flex
flash.external.ExternalInterface.call(Mediabox:String[,'url', 'title', 'width height']):Object;
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
— Same as 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, or loads the wrong media
— Make sure you’ve updated the Mediabox javascript file with the correct path to the JW Media Player or NonverBlaster.
— NonverBlaster may need to be in the same directory as mediaboxAdvanced, for it to properly load the media link.
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).
Internet Explorer stops loading the page, “Operation Aborted”
— There are apparently several problems that can cause this, but the typical issue seems to be that mediaboxAdvanced (or another script) is trying to access elements that aren’t there yet. You can change the line
window.addEvent("domready", Mediabox.scanPage);(at the very end of the script) towindow.addEvent("load", Mediabox.scanPage);and it should fix the issue. However; changing this means none of the overlay links will work until the entire page is loaded.
Compatibility
mediaboxAdvanced has been tested on both Microsoft and Apple platforms with very few known bugs. Tested and working in the following:
OS X — Chrome, Firefox 3.5, Opera 10, Safari 4
Windows 7 — Chrome, Firefox 3.5, Internet Explorer 8, Opera 9.6, Safari 4
Many versions (not necessarily the latest) have also been testing in:
OS X — Camino 1.6, Cruz, Stainless
Linux (Mint 6.0) — Firefox 3
Linux (Ubuntu 8.10) — Firefox 3
Windows Vista (Home Premium) — Chrome, Firefox 3, Internet Explorer 6, 7, 8, Opera 9.6, Safari 3
Known Issues
Gecko
— Gecko rendering engines version 18 and earlier (Firefox 2, Camino 1.6) will not render flash content on top of a transparent background. This has been fixed by replacing the transparent background with a PNG in the CSS file. This causes scrollbars to be rendered on top of the overlay, which was fixed by setting the overlay background to position: fixed;. Unfortunately, this breaks scrolling via mouse wheel (all other scroll methods work fine). Bottom line – I do not recommend using these browsers.
Safari
— Safari 4.0.2 (old version) has trouble with Flash media playback. Safari 4.0.3 has fixed most of the issues (stuttering video playback and pauses), but some Flash applications may still have trouble.
Internet Explorer
— Internet Explorer 7 has trouble with iFrame scrollbars loosing focus while scrolling content by clicking and dragging on the scrub bar (typically sites with XHTML doctypes). No known workaround for this.
— Some Internet Explorer 8 users have reported trouble updating iFrame content (not fully diagnosed as I can’t seem to reproduce it myself).
— Internet Explorer 8 may fail to unload the overlay, instead reloading the content into the parent document. This can be caused by flash content loaded using SWFobject; setting mode=transparent should fix the issue. Thanks to Leo Feyer for tracking down the solution.
Joomla
— Because the admin side loads it’s own set of Mootools scripts, conflicts can quickly give rise to weird issues. For example, YouTube videos may fail to autoplay. Please refer to the Joomla community for wrangling script loading errors like this.
Nebulous issues
— If the connection to a server fails during the process of opening mediaboxAdvanced, the overlay will fail to load the media, and the browser will remain oblivious to the error, simply displaying an empty overlay. No currently known workaround for this. Most commonly encountered with sites such as RuTube and Tudou.
Version history
Source code with version history can be found in the Google Code repository.
v1.2.0 — Added Quicktime support via Quickie, added volume preference
v1.1.9b — Removed out of date Justin.tv support
v1.1.9 — Fixed no-set (thanks to Leo Feyer), colour!=color, and percentage errors
v1.1.8 — Fixed errors with extra wide image sizes (thanks to Dušan Medlín)
v1.1.7 — Fixed and updated NonverBlaster integration
v1.1.6 — Fixed a bug in Internet Explorer
v1.1.5 — Optimised image preloading for IMG tag embedding
v1.1.4 — Added img embed option (allowing for resizable images)
v1.1.3 — Fixed some errors with non-standard image links and URL variables
v1.1.2 — Added Twitcam support, fixed small screen top/left overflow
v1.1.1 — Added options for default size and opening animation
v1.1.0 — Internal updates to accommodate manual formatting
v1.0.7 — Added support for yFrog images and videos
v1.0.6 — Added support for Fliggo, TwitVid.com, TwitVid.io, TwitPic, and TweetMic
v1.0.5 — First official “1.0” release, cleaned up various sub-routines
v1.0.4 — New overlay centring setup, updated Flash detection
v1.0.3 — Cleaned up extraneous lines, CSS3 style support
v1.0.2 — Added IE6 detection and background overlay support
v1.0.1 — Revamped animation setup
v1.0.0 — Recoded several major systems
v1.0.0 — Added support for Break.com, GameTrailers.com, Justin.TV, and Ustream.tv
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!)
Support
I love to hear about sites that use mediaboxAdvanced, and from people that find it helpful! There’s an email form at the top of the page. You can also promote mediaboxAdvanced by posting a link back here (http://tr.im/mbAdvanced or http://tr.im/mediabox are easy links), 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, but when posting an issue 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!
Understand that support is not in any way promised: I may be unable to help with a specific issue, or even respond to emails and posts in a timely or reliable manner. This is why it’s important that questions get posted to the Google Group, where other users (many more experienced in programming than I!) may be able to help out.
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.
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 
Incredible!
Awesome!
Magnifico trabajo.
Felicidades.
Thanks! Just what I need!
Awesome work…
Looks great.
Managed to get it working without too much trouble.
Thanks a lot
PROPS
You saved me. It works great in all browsers. Firefox 3 & Safari 4 & IE 7
NonverBlaster:hover can play MP3 since 21.04.2009
What an awesome script!
But is there any way to just have a link saying “Open gallery” and then it opens the popup with images from a folder, so there is no images on the page.
I’m having trouble making the effect work with .flv. I got it to work with youtube and vimeo though. I would guess the problem is somewhere in the connection to the JW Player. Can you give me more of a how-to explanation for use with .flv? Thanks.
Wonderful job! thanks a lot!!
however I must report an issue. For all links with brackets it doesn’t work.
The box opens but remains empty.
Hi,
Great script, got it working first try however I have encountered an issue.
I want to include videos from a sub-domain (different server). For example, my site is example.org and I want to play videos from videos.example.org.
How do I include videos using a hyperlink such as http://www.videos.example.org/example.flv?
Thanks
Just a short comment to say thank you for this great and very useful tool.
Best regards,
Thomas
for sure just a newby problem, but it took me some hours to realize that the copied statement in the header linked to 1.0.5 of mediaboxAdv. . .
now everything works fine, thanx
HI, this is awesome, I just insert the code and the nonver player and its workin! not like the jw player that for some reason its not working for me, I use a custom skin, and I dont know how to place it right, intheri wizard everything works fine but when i insert the code notinh happens… I have a little doubt, how do I change the color of the controls in the nonver plaer, i checked his site and the files in the zip file, followed the instructions but nothing happens when I put some flashvar in the head of the code, I thought you might know, thanks for this great tool!
Hi Iaian,
Sorry I entered the wrong email on my last post.
Still having issues getting the overlay to cover all of the Internet Explorer window. I am using your example and works great in Safari and Firefox.
http://www.aberdeenweddingfilms.com/mediaboxtest.html
Clicking on the links in IE7 when the overlay appears it doesn’t cover the html area that is the links themself. Weird.
Any help would be great.
Thanks.
Wes.
Got it working now.
My html file required the following line at the top:
<!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”>
Previously I just had:
<html>
Now it works.
I think this is the best, rich and powerful viewer on the net!
Thanks!
I’m writing an HTML5 Web application, and MediaboxAdvanced 1.16 isn’t working. Does MBA require an XHTML DOCTYPE? I’m using the correct HTML5 one, <!DOCTYPE html>.
Great package. I did have to add the “stretching=none” variable to the JW Player code in MediaBoxAdvanced 1.1.6 (line 347) to get video working in IE7. Don’t know if anyone else has had problems with IE getting audio but no video, but this seemed to fix it.
-seem great, works so lala for me, but I can’t get sIFR (or fontburner) to cooperate . Do You know, how I can do this?
Hi, it’s me again – forget my last blog :: I finally did it.
Now I start backing my new site; and be shure, I use mb advanced!!
Thanx a lot
For anyone having trouble getting .flv to play in JW Player.
In the mediaboxAdv.js, on line 97 you need to specify the correct path to your player.swf file, and on line 104 you need to set useNB to false.
First of all, I have to say the mediaBox is awesome! Thank you for sharing your work!
I use the white theme (white overlay and white box) it looks great in the Firefox and Safari, but in other Browsers that don’t support BoxShadow it’s hard to see the difference between box and overlay. It’s not a big deal to modify the CSS. But it would be great to have a solution for IE and older browsers .. Cheers Johannes
I’ve recently noticed, when trying to implement the newest version (1.1.7) that line 311 of JS file that encodes the url may have problems with already enconded strings, as it may receive “The%20Space” for example, and turn it into “The%2520Space”, enconding “%” as “%20”.
Commenting that line and allowing the control to read the URLs as they are, doesn’t cause any problem, even with the “(” and “)” (as that line forces the encoding of those characters after applying the encodeURI function). You can probably customize another way for this, but a quick way to do it is avoid encoding if your target broswers receive unencoded urls alright
Code causing the problem is: URL = encodeURI(URL).replace(”(”,”%28”).replace(”)”,”%29”);
Hello! LOVE YOUR WORK! Thanks so much for doing what you do!
Just thought I’d share a very valuable resource with you:
http://www.jslint.com/
I often times have to run your code through that and fix misplaced semicolons and missing semicolons. While your code works fine directly, when parsed through a compression routine, it throws syntax errors due to non-standard formatting.
I thought this little resource would be of great help to you, as it has been to me!
Fantastic – appreciate the effort and sharing.
AN7effects
Great Stuff
looking forward to working with this
Regards
Kb