mediaboxAdvanced
iaian7 » code » webcode John Einselen, 28.09.09 (updated 6.12.19)This script is no longer supported or actively developed, but the documentation and examples remain available below. Though a completely different approach, and far more minimal in scope, you might check out CSS Lightbox Overlay for a significantly lighter weight alternative (it barely relies on javascript at all).
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.3.4 introduced optional support for YouTube and Vimeo HTML5 players. While on the desktop this means more iFrame usage (and thereby a flash of unstyled white before content is loaded), videos displayed in the overlay can be played by Apple iOS devices, including the iPhone, iPod Touch, and iPad, along with other mobile devices that support HTML5. The setting is near the top of the options section in the javascript file. Support for Twiturm was also added, along with minor code maintenance and testing with Mootools version 1.2.5.
mediaboxAdvanced 1.5.x is no longer being developed, but is still available with some reworking of the core, supported site updates, CSS3 updates, a few critical fixes, and trimming of unnecessary clutter. Stop by GitHub for the latest code.
Introduction
Introduction | Examples | Installation | Scripting | Troubleshooting | Support
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/5N35X" rel="lightbox[twitter]" title="TwitVid">TwitVid »</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>
Privacy settings are enforced by Facebook: 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://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://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>
<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://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]" 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>
<a href="http://www.veoh.com/watch/v20943320Dz9Z45Qj" rel="lightbox[social 410 341]" title="www.veoh.com">Veoh »</a>
<a href="http://vimeo.com/877053" rel="lightbox[social]" title="vimeo.com">Vimeo »</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 site’s media player, not the video’s 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>
vids.MySpace » (some known issues with embedding limitations)
<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 » (some known issues with the server refusing links)
<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 plugin.
<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.
<a href="http://symboleffects.com/media/2007vfx.mov" rel="lightbox[quicktime 640 360]" title="MOV video::2007 VFX reel - John Einselen">MOV video »</a>
Quickie.js, the helper script for handling QuickTime media, has not been updated to use MooTools 1.3 yet. While mediaboxAdvanced 1.4.x fully supports Mootools 1.3 and does not require compatibility enabled, until Quickie is updated you’ll still need to include Mootools 1.2.x compatibility. For testing purposes, this page does NOT include Mootools 1.2.x compatibility, so the above sample has been disabled due to Quickie’s use of deprecated code.
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 mediaboxAdvanced knows to load it from the current page.
It’s also important to note that when mediaboxAdvanced loads an overlay, it recreates the embedded content, instead of moving it from its current location. This prevents any weirdness when closing the overlay (which destroys the overlay content to prevent even more weirdness!), but means that adding custom code to the embedded elements may be messed up (especially attaching events with element references). If possible, element references should use relative methods to accommodate for any position in the DOM. i.e. They shouldn’t depend on a single ID since the elements will be duplicated once copied to the overlay (relative methods such as child, parent, previous, next, and multi-level selectors are typically more flexible).
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://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>
<a href="http://movies.yahoo.com" rel="lightbox[external 640 50%]" title="movies.Yahoo.com">movies.Yahoo.com »</a>
<a href="http://vectorform.com/" rel="lightbox[external 80% 660]" title="Vectorform.com">Vectorform.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
1 (42kb, compressible to 22kb)
(updated December 3rd, 2010) There seem to be some errors in Internet Explorer 8 when using version 1.3.4b. Until I get a chance to test things out and fix the bugs, you may be better off with mediaboxAdvanced version 1.2.5, listed under “older versions” – be sure to download all the pieces, as this installation requires images as well.
Mootools 1.2.x 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.
(updated April 27th, 2011) Mootools version 1.3.1 seems to introduce a lot of issues, for now, mediaboxAdvanced works better with Mootools 1.2.5.
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 (though the Google Group is a great place to start).
Because of the necessary customisations required by mediaboxAdvanced, I cannot offer pre-compressed versions. 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 around 50%.
2 – Download CSS
1 (3kb)
1 (1kb, contains images for older browsers)
This update is required if you are running mediaboxAdvanced version 1.3.0 or newer (deprecated files can be found further down the page under “old versions”). This newer version eschews the need for image based buttons, using customisable text fields instead. Loading animations are still required in GIF format, and a PNG overlay image is still required for compatibility with older Firefox versions.
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 (currently used to turn off shadows while animating the overlay, which can otherwise severely impact performance on older computers).
3 – Upload to Server
Copy the files to your web server, and into the appropriate folders (usually /js/, /css/, and /images/). It’s imperative that links added in the header point to the correct locations; mediaboxAdvanced doesn’t require a specific path to run, so long as you know where all the files are and create the header links accordingly.
4 – Edit
From your server, open up the mediaboxAdvanced javascript file in a text or code editor and update the options section to reflect your desired settings. Make sure you update the file path to the NonverBlaster player (or JW Media Player if you prefer) with the correct path to the online location.
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, if you wish to customise the look and feel of the overlay. Make sure the loading.gif and 80.png files are linked correctly, or they won’t show up in the final page.
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/mediaboxAdvBlack21.css" type="text/css" media="screen" /> <script src="/js/mootools-1.2.4-core.js" type="text/javascript"></script> <script src="/js/quickie.js" type="text/javascript"></script> <script src="/js/mediaboxAdv-1.3.4.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 test
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 gallery 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 common point of 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 a YouTube video will always open the video, regardless of the gallery you put it in – the gallery set name 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 like this:
<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>
You can also promote mediaboxAdvanced by posting a link on social sites (use http://an7.in/mbox if you want a short version), recommend it to your friends, or become a fan on Facebook.
Post any bugs or issues you come across to the Google Group. I encourage you to test out features and bang around a bit on it; if something isn’t working, please post the OS platform, browser, media type, and an online example of the problem.
GitHub
mediaboxAdvanced is also available from GitHub, including full history, source files, assets, and demos.
Older versions of mediaboxAdvanced
1 (39kb, compressible to 20kb)
mediaboxAdvanced versions 1.2.5 and older require a different CSS file along with images for the previous, next, and close buttons:
1 (contains images for black, minimal, and white themes)
Other Tutorials and Resources
Send me your blog posts, tutorials, or other content, I’d be happy to list them here! Let me know of any updates or links that are missing.
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.
Using the Wordpress plugin, Tim Tyson has written a nicely detailed tutorial on using mediaboxAdvanced in a WP site.
Louis has posted a tutorial for using mediaboxAdvanced with NucleusCMS, along with a forum discussion on integration.
Markus Martens has created a Typo3 extension called Mediabox.
Barry de Graaff has written example code for automatically playing the next video in a gallery using mediaboxAdvanced with NonverBlaster enabled.
Youjoomla has created a dedicated Joomla extension for using mediaboxAdvanced using simple inline code.
Contao CMS features mediaboxAdvanced as a plugin for lightbox based media integration.
Adding mediaboxAdvanced to Blogger, written by Prayag Verma, gives steps for enabling overlays on a Blogger website.
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.
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 is verified on both Microsoft and Apple platforms, with very few known bugs or issues. Though developed primarily in Safari, the script has also been tested (and yes, works!) in the following browsers.
OS X Snow Leopard
- Camino 2
- Chrome 12
- Chromium 12
- Firefox 4
- Opera 11
- Opera Next 11.5
- Roccat 1.5
- Rockmelt
- Safari 5
iOS 4.3 both iPad & iPhone
- Safari Mobile
Windows 7
- Firefox 4
- Internet Explorer 9
- (IE 6, 7, & 8 via IEtester)
- Opera 11
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.
— 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 script loading solutions.
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 also be found in the Google Code and GitHub repositories, albeit not updated as often as this site. If you have contributed code to this project and I’ve missed your name, please let me know!
v1.5.4 — revamp of the dimensions system, fixes title/caption errors, and updates style sheets to match
v1.5.2 — style updates, smarter size calculations, and iOS integration
v1.5.1 — added centering on window resize as suggested by Garo Hussenjian
v1.5.0 — migrated entire script to “media” element (previously “image”)
v1.4.9 — added/updated several NonverBlaster styling options
v1.4.8 — removed JW Player support due to increasingly restrictive licensing
v1.4.7 — added media container parent element (additional CSS styling options)
v1.4.6c — removed unnecessary YouTube quality settings
v1.4.6b — removed dead sites (Seesmic, Twiturm, Viddyou, and 12seconds.tv)
v1.4.6 — fixed URL bug (thanks to Dušan Medlín)
v1.4.5 — added more robust inline content support with events
v1.4.3 — added Facebook-style image navigation (click to advance)
v1.4.2 — more iOS improvements
v1.4.1 — Fixed overlay in iOS browsers
v1.4.0 — Initial iOS testing and updates
Support
There’s an email form at the top of the page, and while I do love to hear from mediaboxAdvanced users, please understand that personal support isn’t something that can can be promised. I do my best to keep up, but may be unable to help with a specific issue, or respond to emails in a timely or reliable manner. This is why it’s important that support questions are posted to the Google Group, where other users (many of whom are more experienced developers than I!) may be able to help out.
It’s open for anyone to join with a Google account, but when posting an issue or question to the group, please remember to include a link to an online example of the problem, steps to reproduce the issue, and any relevant information such as operating system and browser version. Also note that basic HTML, CSS, and Javascript questions should be posted to more appropriate forums, keeping discussions about mediaboxAdvanced on topic. Thank you!