Let me know of your support and donations, and I'll keep track of the total funds raised right here!
$49 ~ thank you
Mediabox 7.07.07, John Einselen
Using the MooTools javascript library, Mediabox lets you open flash, video, and html content in a floating “lightbox” style window.
With the official release of Mootools 1.2 (and the quickly released Slimbox 1.6) Mediabox will be making the transition to the new framework as soon as I have time. I apologise for the wait, but rest assured that Mediabox is not dead! I just happen to be travelling a great deal this month, and haven’t had a good chance to hammer out the massive revisions needed.
Version 0.7.2
adds support for MySpace, Revver, Veoh, and Viddler content!
(download below)
Online Video
Mediabox will read Flickr, Google, MetaCafe, MySpace, Revver, YouTube, Veoh, Viddler, and Vimeo links by automatically translating them into embed code and inserting the video into the lightbox style effect.
<a href="http://www.flickr.com/photos/bhl1/2402027765/in/pool-video"rel="mediabox[400 300]" title="flickr.com">play Flickr video »</a>
<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="mediabox[640 290]" title="video.google.com">play Google video »</a>
<a href="http://www.metacafe.com/watch/377633/transformers_2007/" rel="mediabox[400 350]" title="www.metacafe.com">play MetaCafe »</a>
<a href="http://myspacetv.com/index.cfm?fuseaction=vids.individual&videoid=23472681" rel="mediabox[430 346]" title="myspacetv.com">play MySpace »</a>
<a href="http://www.revver.com/video/758469/see-whats-possible-challenge/" rel="mediabox[480 392]" title="www.revver.com">play Revver »</a>
<a href="http://www.youtube.com/watch?v=l9MdgSUpG5U" rel="mediabox[480 380]" title="www.youtube.com">play YouTube »</a>
<a href="http://www.veoh.com/videos/v753286qccrGhsT" rel="mediabox[540 438]" title="www.veoh.com">play Veoh »</a>
<a href="http://www.viddler.com/explore/clintus/videos/143/" rel="mediabox[437 370]" title="www.viddler.com">play Viddler »</a>
<a href="http://vimeo.com/615344" rel="mediabox[400 302]" title="vimeo.com">play Vimeo »</a>
Mediabox can also integrate DailyMotion videos, but it’s a little less foolproof since page links and embedded links don’t use the same ID numbers. To insert a DailyMotion video, you have to use the link given in the embed code.
<a href="http://www.dailymotion.com/swf/1zR7vSr9sneRWgUqL" rel="mediabox[640 486]" title="www.dailymotion.com">play DailyMotion »</a>
Flash Animation
If the link is to a specific .swf file and isn’t from one of the above video sharing sites, it’s embedded directly (the file below is from HomestarRunner.com).
<a href="http://www.homestarrunner.com/tgs10.swf" rel="mediabox[550 410]" title="flash animation">play flash animation »</a>
Flash Video
If the media being linked to is a .flv (flash video) file, it will be embedded using Jeroen Wiering’s Mediaplayer. The flash player controls are hidden till the user mouses over the content. This not only gives a cleaner, more dramatic presentation for the video being embedded, but fixes display errors in Firefox Mac (see Known Issues, below). Update: in the latest versions of the JW player, the controller is still displayed on top of the video, but is not hidden until after the user mouses over and back off at least once.
<a href="http://iaian7.com/media/2007/06/2007vfx.flv" rel="mediabox[640 360]" title="flash video">play flash video »</a>
Quicktime
Quicktime content now plays correctly in most browsers, including Safari 1.5/2.0 (which required extra coding to stop playback when closing the layer). The height of the controller (16 pixels) is automatically added to the media height if the controller option is set to true in the javascript (as of version 0.6.7).
<a href="http://iaian7.com/media/2007/06/2007preview.mov" rel="mediabox[480 270]" title="play">play quicktime movie »</a>
Windows Media
WMV files are only partially supported right now, as plugin usage seems to be… weird. Does not work well in Internet Explorer 7, and is all but completely broken in Opera 9 and Safari 3 for Windows. Also, it sometimes breaks Safari in OS X.
<a href="http://iaian7.com/media/Puppet.wmv" rel="mediabox[480 270]" title="play">play wmv file»</a>
Inline Content
By referencing inline content via element ID, Mediabox will take overlay content from anchor links. This can be especially useful when working with a content management system or similarly generated content, since Mediabox overlays can access page content directly, not just outside links! For example, wrapping a comment submission form with a DIV that’s hidden, then linking to it with Mediabox will let you create comment submission overlays. The possibilities are endless…
<a href="#mb_inline" rel="mediabox[360 180]" title="inline content">open inline content »</a>
<div id="mb_inline" style="display: none;"><span style="color: #999999; text-align: center;">inline page content wrapped by a DIV set to display:none, and shown in a Mediabox overlay.</span></div>
Please note – because other valid HTML links may contain anchor links, Mediabox will only work with elements whose IDs start with “mb_”.
Web Content
If the link passed to the script doesn’t fit any of the above media types, it will be opened in an iFrame content area. While iFrame usage isn’t as flashy as AJAX, it allows you to embed forms, pages, sites, and etc. without any scripting or styling conflicts. It’s simple, it works.
open Yahoo Movies » (see “known issues” for Opera compatibility)
<a href="http://movies.yahoo.com" rel="mediabox[800 600]" title="Movies.Yahoo.com">open Yahoo Movies »</a>
open Google.com» (see “known issues” below for a Safari quirk)
<a href="http://www.google.com" rel="mediabox[640 360]" title="Google.com">open Google.com »</a>
In all, Mediabox is designed to compliment the image based functionality of Slimbox (or other lightbox style scripts), offering the same effect for flash, video, and html content.
Javascript
A Mediabox overlay can also be opened using javascript:
<a href="javascript:Mediabox.open('http://iaian7.com/media/2007/06/2007vfx.flv', 'javascript example', 'mediabox[640 360]')">Click Here</a>
Keep in mind that using <a href="#" onclick="..."> will cause the page to jump to the top, while leaving the Mediabox window behind at the original click point, due to the nature of anchor links. It’s inadvisable to use javascript calls for a simple link anyway, since that functionality is already built into Mediabox. However, the direct javascript call can be very useful in other situations; to load a Mediabox window on page load, you can use the onload=”...” function in your <body> tag.
<body onload="Mediabox.open('url', 'title', 'mediabox[width height]')" >
You can also close the Mediabox overlay from within an opened iFrame by using parent.Mediabox.close();
(Thanks to NiteStyle for enlightening me!)
Flash
Flash files can access Mediabox overlays via ActionScript (code courtesy of Peter Cha).
AS 3.0
var mediaboxCommand:String = "javascript:Mediabox.open('url','title','mediabox[width height]');void(0);";
var url:URLRequest = new URLRequest(mediaboxCommand);
navigateToURL(url, "_self");
AS 2.0
getURL("javascript:Mediabox.open('url','title','mediabox[width height]');void(0)");
Frames
When a site is designed in frames, links will automatically open their Mediabox window inside the frame wherein the link was clicked. There is no way I know of to make this work with the auto detected links unless I were to rewrite Mediabox to recognize target=“parent”, and even then it’s iffy.
However, you can send a javascript call to the parent frame. So long as the parent frame has the proper javascripts linked and running (Mootools, Mediabox, etc.), it should work fine.
javascript:parent.Mediabox.open('url', 'title', 'mediabox[width height]');
Download
Script –
mediabox72.js version 0.7.2 Beta (about 14kb)
mediabox.css (this CSS also contains the necessary styling for Slimbox, see below)
mediaboxImages.zip (includes matching images for Slimbox)
Dependancies –
Mootools javascript library, Mediabox requires the Base, Class, Native, Element, Window, and Effects modules (in total, less than 30kb).
SWFobject 1.5 for implementing flash content (less than 8kb)
JW Mediaplayer or JW FLVplayer. (or get it from the Mediaplayer v3.99 archive)
Optional –
Mediabox is designed to work well alongside Slimbox, a lightbox script for images and image groups. Not only are the link formats very similar, but the CSS formating is exactly the same, allowing you to use just one CSS file to style both scripts.
One note about setting up the CSS (and this goes for Slimbox and Mediabox both); if other elements on the page use z-index settings, they will appear on top of the overlay and content box. This can be fixed by adding z-index: 50; to #lbOverlay, and z-index: 51; to #lbCenter, #lbBottomeContainer in the CSS file (you can use any values, so long as they are greater than the other elements on the page).
Installation
mediabox.js, mediabox.css, mootools.js, and swfobject.js should all be loaded in the page header. If you’re also installing Slimbox, you only need one copy of the CSS code, either slimbox.css (with the default styling of white and gray) or mediabox.css (which is a black theme).
<head>
...
<link rel="stylesheet" href="/css/mediabox.css" type="text/css" media="screen" />
...
<script src="/js/mootools.v1.11.js" type="text/javascript"></script>
<script src="/js/swfobject.js" type="text/javascript"></script>
<script src="/js/mediabox.js" type="text/javascript"></script>
...
</head>
If you want to test this on a local machine, you can download a minimal test setup and unzip it to your hard drive. It contains all the basic files needed, except for the JW mediaplayer.
Some users have reported problems with the CSS if the page does not include a DOCTYPE. Check out w3.org for more info on the various options, personally I use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> because that’s the default Textpattern CMS preference.
Open up mediabox.js in a text or code editor to set the preferences; most can be left at the defaults, but you do have to set the path to the JW mediaplayer. Each option has a short description, and should be fairly easy to set up.
The CSS file must also be edited with the correct links to the images.
That should be it! Try some links with the following format:
<a href="link" rel="mediabox[width height]" title="caption text" >link text</a>
Blogs and Content Management Systems
Adobe Lightroom: web module by Matthew Campagna.
RapidWeaver tutorial by Kevin Burns
Textpattern: plugin by John Einselen
Typo3: integration by Georg Ringer [english]
Let me know of other plugins and integrations, and I’ll list them here.
Troubleshooting
If you encounter errors, please double check the following:
— did you upload all of the JS and CSS files to your server?
— are the links in your header relative or absolute? (Either is correct, but relative won’t always work in some page / url setups)
— is the Mediabox.js script correctly updated with the path to the SWF player?
— are you running any other scripts on your website? (Prototype and Scriptaculous directly conflict with Mootools, as do any other JS libraries)
Known Issues (General)
— Mootools 1.2 is not supported, Mediabox currently runs only with 1.11. The next major release (0.7.4 may be a small update to include several more formats) will hopefully add complete Mootools 1.2 functionality.
— SWFobject 2.0 is not supported, you must use version 1.5. In connection with Mootools 1.2 support, the next major Mediabox release will hopefully eschew SWFobject for a completely native solution.
Known Issues (OS X)
— Firefox 2.0 is incapable of rendering Objects (either Flash or QT) correctly when displayed above any sort of background (simple colors, images, or even worse, other media). Usually, the playhead of the video will move, causing it to appear again. Sometimes other elements aren’t so lucky, but for the most part things remain usable. YouTube, unlike most flash video sites, will render correctly, as will the JW players when the controller is set to mouse over (which is the default setup in Mediabox). DailyMotion content may not show up at all until the user clicks blindly on the play button. Camino 1.5 and Flock 2.0 have similar problems.
Flash media embedded on a page in Firefox, and especially items directly underneath the lightbox window, may or may not become completely or partially invisible or visible, and/or gruesomely mangled. It’s probably best if you use mediabox for all media on a page, or none at all, instead of trying to embed both lightbox style effects and inline objects.
It has been pointed out that flash media is hidden when Mediabox opens an overlay. This is necessary because of rendering issues in Firefox and some other browsers. The flash content is of course un-hidden when the overlay is closed, however, if the flash content isn’t playing, no update to the imagery is detected in Firefox, and the content will remain invisible (though technically shown). I have found no way to fix this, as Firefox simply refuses to display Flash content correctly in a layered environment.
— Loading sites with flash based advertising or popups (such as movies.yahoo.com) in Opera 9 will sometimes cause elements to reach beyond the bounds of the iFrame containing them. It is, I believe, simply an issue with Opera’s implementation of the iFrame standard and therefore unfixable on my end. So long as you don’t embed sites such as movies.yahoo.com, Opera is quite happy.
— Loading some sites inside an iFrame with Safari 1.5 and 2.0, or Opera 8 will cause the browser window to scroll to the top. It’s only a few select sites that cause it (google.com), loaded as iFrame content, and it’s only in Safari 1.5, 2.0 and Opera 8 (that I know of), which given their outdated nature may not be that much of a concern.
— Camino 1.5 only partially supports WMV files played through the QuickTime plugin. While the video will load, page elements can become jumbled and various white spaces will appear until the page is forced to refresh.
Known Issues (Windows Vista)
— Quicktime media suffers from the click-to-activate “feature” of Internet Explorer 7 and Opera 9. Unfortunately, the text doesn’t actually show up, so viewers are stuck with a blank screen that, if they know to click on it, will thankfully still play the quicktime just fine. I originally tried to use a script setup for Quicktime much like the Flash setup used, but was entirely unsuccessful. Till I can revisit the Apple standards and rebuild the QT loading architecture, this is an unfortunate bug that may not go away.
Version History
v0.7.2
— MySpace, Revver, Veoh, and Viddler support added
— prevented crash with WMV in Safari
v0.7.0
— Flicker Video support added
— Vimeo support added
— inline HTML content support added
— fullscreen options fixed
v0.6.8
— display position is now a javascript option
v0.6.7
— QT media now automatically adds the controller height
v0.6.6
— captions fixed
— fullscreen JW mediaplayer option added (still not working)
v0.6.5
— fixed IE7 errors when unloading content (still in beta)
v0.6.4
— reworked script layout and media loading process
— fixed Safari QT errors
— fixed Opera QT errors
v0.4.2
— fixed double loading error (download archive)
v0.4.1
— fixed script init error
v0.4.0
— public beta release
v0.1.0 – v0.3.5
— private beta release
Credits
Mediabox is based on:
Slimbox version 1.4 by Christophe Beyls
Slimbox Extended version 1.3.1 by Yukio Arita
Videobox version 1.0 by Faruk Can Bilir
DM_Moviebox version 1.1 by dutchmonkey
Comments
Please read the documentation. It’s updated as errors are found, tricks discovered, and new features added. If you can’t get Mediabox to work, the solution is probably already posted above. Double check the list of common errors in the Troubleshooting section!
For support requests, you must include a link to the problematic page. If a site is still under wraps or NDA, send me a private message, along with any NDA documents that might be required.
As part of the very long-in-coming site redesign, support questions will be moving to a new system that will make it easier for you to track replies. While commenting here will stay active, I’ve already set up the Disqus community page for Mediabox. Feel free to start using the Disqus system, and while it may change again before the year is out, it should be a good stopgap till I can develop a more integrated solution. Thank you for your patience, and I apologize to everyone who’s questions have been lost in the email system or left unanswered here on the site.
« comment
bookmark
hi guy, could you help me?
Why if i change the background image path in css file the mediabox doesn’t work?
Hi,
Thanks so much for this. It is great to have people like you out there sharing!
I noticed that next and previous images are included, but the normal lightbox functionality of the brackets for defining a group are instead used for sizing.
Is it possible to group a list of items on the page and then have next/previous buttons for advancing through them? Am I missing something?
Thanks
Does this work using Rokflow to bring up linked sites to the image ?
Hi John!
A couple of problems I hope you can help me with so I can sooth an irate client. The first, I hope, is easy.
He has a double-click habit. This causes no problem in IE, but in FireFox, the second click closes the window before it fully opens. I haven’t looked, but is there an easy way to disable the “outside the box” close click so that only the Close button closes the window?
The second has got me completely stumped. I have tested in several browsers and browser versions on 5 different machines. Works fine. However, when my client clicks an icon it cannot find the file. He is using the latest IE7. There must be something in his IE7 setup that is causing Mootools not to function. This is my guess. I am hoping you might have a clue. I’m sending the link via private message, as I don’t want bots to pick it up here.
Hi again,
..just a short question: where in the CSS can I adjust the position of the mediabox?
I need to reduce the upper space to the browser.
hi,
great work, great script.
But I have a problem.
its possible to close the iframe in other way like in JS?
i’ve try to close like mediabox.close();
but it doesn work.
Thx in advance
Hi all,
I got it working on one of my sites but on the other one I got an error 403 , even if the settings are the same and the two sites are hosted in the same hosting company.
I only use it for youtube video and here are the files that I have uploaded :
mediabox.css
mediabox.js
mootools.js
(folder)mediaboximages
(all files in folder)swfoject1-5
Nik – Since the position is controlled by the javascript instead of the CSS, I’ve released a new Mediabox version to take care of this. Vertical position is now added to the options near the top, edit that, and have fun. 
NiteStyle – Because Mediabox opens HTML content in an iFrame, javascript isn’t able to affect the parent page, since it’s treated as a separate window (as far as I understand). If you’re trying to close Mediabox via a script from the parent page, I’m not entirely sure how to go about it, save for what you’ve already tried. Do be sure that the capitalization is correct; some systems will really bug out about that. It should be “Mediabox.close…”
Dax – A 403 is a server denial error, and has no conceivable connection to Mediabox… Have you checked your .htaccess files, or any other hidden elements that could be making the difference?
John,
thank you for this new version.
It is a bit hard to make a exact positioning for the box, cause the settings aren’t in pixel.
I’m trying to place the box exact in top of the maincontent position of the site…. but I got it almost perfect.
Maybe it is possible to change this to pixel – some day.
Thanks again for this wonderful script.
@Iaian7
its seems to work…thx
it must be “parent.Mediabox.close();”
i jstu forget the parent, hehe 
Thanks for figuring this out, I’ll add it to the scripting documentation above.First of all thank you for the great work you have put into this.
Is there any way to set the size of the mebdiabox as a percentage of the screen size. (“rel=mediabox[90% 90%]”) This would be a great feature for showing web content since you want it to be small enough for tiny monitors but not be this little itty bitty window on larger monitors.
Is there a way to turn off the controller completely in the FLV JW media player? This may be a nice effect since you can already pause/play the video by just clicking on it. This would make for a very clean video playback.
And last but not least, how do I set the mediabox to display in the middle of the screen?
It would also be great to get the JW Media Player fullscreen working.
Thank you so much for your time!!!
It works with PDFs as well. I have tested it and it seems to work just fine. The loading gif doesn’t not show up though.
Hello this is from Japan
Your script is very useful!
but now I have one problem
Could I ask you?
I tried following script you wrote.
I filled URL, title, Width, Heoght…These are right…but
This doesn’t work
Why???
Have you got plans to upgrade the script to mootools v1.2,love to use this but having conflicts with scripts that use v1.2b
Hi there
Great script , I was wondering if there is a way to integrate with Accordion also
In other words add the accordion elements also to override an accordion only developed page
;)
Regards
Kb
Hi,
First of all, thank you for the great script.
I’m having a weird problem. I hope you can help me.
In the demo for flv, the flv player controller is hidden when the video starts. However, some reason, on a website that I’m developping, the controller appears until move the mouse pointer over the controller then move it off.
The weirdest point is if I change the path to mediaplayer.swf in Mediabox.js to your mediaplayer.swf (http://iaian7.com/js/mediaplayer.swf) the controller would be hidden as your example. Do you have any idea why it is?
I would appreciate if you could help me.
Thanks in advance and sorry for my bad english…
Takashi
Thank you very much for your answer. and
Sorry, I wrote meanless question..
I forgot to write the problem!(So foolish!)
The Problem is
this dosen’t work..
my URL is
http://neoska.com/yourude
Click the tumbnail and (index2.cgi work) open 2 URL at once ..
But only mediabox does’t open..
I wrote like this
$irsrc&$irsrc2 are URLs
sorry again!
I did’t know this message area can not
write tags..
so tags are extinguished..
Briefly speaking..
to load a Mediabox window on page load..
I can’t do
body onload mediabox open
Thanks for the amazing script! I was only wondering 1 thing. Is it possible to call / open Mediabox from within a flash file? For instance from a flash button?
That would be fantastic!
Thanks for this great script but i think i have found an issue that no one else has, so any help would be appreciated. If you visit “ and click onto the More info button next to the Accommodation drop down a mediabox popup should appear. In Firefox (mac and Windows) and IE6 the scroll bar on the popup works as expected but in IE7 the scrollbar will not allow drags. Any ideas?
Hi. 2/12/08 @ 12 30 PT
(Hi to group from Huntington beach CA)
Thanks for your coding efforts. I like mediabox & have the basics working well.
Hopefully this is not too dumb a ?.
My page that has the links to video’ content are themselves inside an iFrame… Is there any way to force the video overlay window to use the parents dimensions when displaying the overlay (& not inside the iFrame (smaller sized) window?)
TIA for any pointers on creating this behavior. // GHudd
I’m having difficulty getting it to ID a WMV Live link, ie:
http://domain.com/WMVlivelink
ideas?
Hi, nice script. Got a question though. When I click outside the MediaBox it closes itself and goes back to the parent page. Is there any way I can prevent that?
Hope you can shed some light on this.
Hi!
Love the mediabox! I’m having a problem trying to wedge it into a page I created using Apple’s iWeb, however. Apparently there’s some sort of Javascript conflict between mediabox and the Javascript that iWeb includes. I get an “Undefined value” error on line 71. See this page for a demo.
Please email if you discover something, since I probably won’t check comments much.
Thanks!
Awesome script! I’m trying to get a flash file to call the javascript but everytime I try I get a false return in the browser. It seems like the movie almost loads but then the javascript call appears in the address bar and the word “false” comes up on the screen.
Anybody had success calling the Javascript from a flash file?
Thanks!
First of all, great work.
I’d like to mention that I did have to change the names of some of the files (mootools downloaded for me as “mootools-release-1.11.js” which I had to rename as “mootools.1.11.js”, which is no big deal for me), just incase anyone is having issues and can’t think of anything else to try.
Also, trying JW MediaPlayer 3.15 and the no-fullscreen issue still seems to be relevant. Though trying it without Mediabox and the fullscreen works. It seems as if JW MediaPlayer already thinks it is in fullscreen mode when in Mediabox. You may already know that, but giving a heads up just incase :p
Loving Mediabox though.
Hi again,
just recognize that my quicktime movie resized with the mediabox.
The quicktime movie is smaller than my default settings of the mediabox and it get “upscaled” to fit the mediabox.
Is this a normal behaviour?
Hi,thanks for a great tool.
It is working great (for me) for all media files except for mms:asf streams.
The issue i have is when i open a link like http://www.salto.nl/streamplayer/tv/amsterdam_1_live.asp
It plays fine in firefox and IE. only when i close it in IE the media keeps playing on top of my webpage (but the black surroundings are closed like normal)
Maybe you are able to replicate and help me out.
Thanks again for the great tool!
Regards,
BAC
Hello,
I noticed something while playing around with another variant of lightbox which also plays SWFs.
When playing a flash file, it seems the background color shows through sometimes with Mediabox, but not with this other I was testing. For example, here’s the flash file in which I noticed this with both Mediabox and the other:
Other
(The white on the top and the bottom of the non-Mediabox are just because it isn’t the correct size of the flash file. I’ve yet to find an easy way to give each SWF their own size. Also, the original background color for the non-Mediabox is white, but I changed it to black for testing.)
You’ll notice right away on the preloader. In Mediabox, you can’t even see the preloader because it is all black. In the other, it shows up clearly. I played around with the css, but couldn’t get anything to work. Any idea what may be causing this?
Keep up the great work!
I seemed to have answered my own question by doing a slight editing of mediabox.js. I simply took out the “#000000” on line 171. I just have to make sure to set the correct dimensions of the SWF files now. :p
Hello! First of all – thank you for all the work you’ve put into this script! I’ve been looking for one that plays videos, and this one was just right.
Is it possible to move the bottom part with the close button to the top of the video, and not have it animate?
Thank you!
Tanya
Hi John,
You are a master. Thanks for your efforts with Mediabox. I have it installed and working perfect in Joomla except for one small problem in IE6 (and maybe 7) — When I use an combined with an image for the link I loose the cursor effect on mouse over that turns the cursor into a “pointer hand.” Works fine in Safari, Firefox, but not IE.
Any thoughts appreciated.
Dante
Update to Previous:
In Joomla if a class=“reflect” is used with a graphical image link, the Mouse Over Cursor Effect that transforms Mouse Pointer into “Link Hand” will not work. Solution is do away with Reflection Javascript and apply to graphic manually if needed.
Odd window sizes do not work properly in IE 6, such as [500 350]. — Dante
Here is what I used in my header to insert mediabox in a wordpress blog:
<script type=“text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/mootools-v1.js”></script>
<script type=“text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/swfobject.js”></script>
<script type=“text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/mediabox67.js”></script>
<link rel=“stylesheet” href=”<?php bloginfo(‘stylesheet_directory’); ?>/css/mediabox.css” type=“text/css” />
Awesome, a nice feature would be to automatically resize to the size of the iframe.
heya
love the scripts, =D been looking for stuff like this for awhile.
but when everything fades out on a MAC OSX, everything EXCEPT the scrollbar fades….. like a scrollbar inside the webpage, not the one on the side. it works in IE and FF in windows, but not in safari or FF on mac?
Fabulous. Works excellently. I desired to make the opacity an option in the script, so added this:
this.options = Object.extend({
customOpacity: 0.6,
about line 115:
//this.fx.overlay.start(0.3);
this.fx.overlay.start(this.options.customOpacity);
It works!
Thanks again.
hey
is it possible to add a description below the caption in the media box, not in bold?
I can’t for the life of me get this to work at all. It simply treats the links as links instead of opening up the overlay window. The only error I am getting is
Mediabox.init.bind is not a function
[Break on this error] window.addEvent(‘domready’, Mediabox.init.bind(Mediabox));
Everything is linked correctly and I have all the needed files. What I am doing wrong? Thanks
great script now that I finally got it working! However it turns out that Quicktime and Flash movies do not really work in Firefox 2.0.x and a Mac. The movies blink constantly and make it impossible to view. It works great in Safari though. I would still love to use this if anyone knows how to resolve this issue…
I love this script, it was definitely what I was looking for…unfortunately I’m having problems using it with mootools 1.2b2.
I get an error in your script:
this.keyboardListener.bindAsEventListener is not a function
Familiar with it??
Hi John,
... just discovered a problem I can’t solve…
If trying to open a FLV its download the FLV instead of playing in the Mediabox.
Maybe the Mediabox don’t find the JW Mediaplayer, but I have tried everything with all kind of paths.
Can you give me a hint how the paths have to look like and where the Mediaplayer have to reside.
Thank’s John,
I found the problem…
It seems the newest version (2.0) of SWFObject is not working together with Mediabox.
I found an older version (1.5) which makes it working.
Maybe you want to check it for further development.
Hi! Id like to say good work on the script!
I do have a quick question though, ive been trying to get the mediabox to launch from a .swf flash file, but with no luck.
I’ve tried these to bits of code in an ‘on (release)’ action in the flash file with your method of:
javascript:Mediabox.open(‘url’,‘title’,‘mediabox[width height]’);
AND the other method ive seen of:
getURL(“javascript:Mediabox.open(‘url’,‘title’,‘mediabox[width height]’)”);
Only the last one compiles a .swf without an error, but when i view it in firefox an overlay flashes up for a second and then the page actually tries to browse to “javascript:Mediabox.open(‘url… and just returns ‘false’ on the page.
Am i missing something? Do i have to put anything extra script wise into the html file where the .swf is located?
I have all the necessary .css and .js files that u reccomend, and mediabox works fine otherwise in html tags.
Any help from anyone would be much appreciated! thanks again!
Mat
...hmmm but the .swf flash works with mediabox in safari but not IE or Firefox.
They both try and actually navigate to:
javascript:Mediabox.open(‘http://www.homestarrunner.com/tgs10.swf’,‘test using mediabox’,‘mediabox[550 410]’);
And, it ends up with just a blank page with ‘false’ on it.
Any ideas?
hey there. great stuff! thx. one issue tho… mine will not work i IE6. yours works but mine does not. any ideas?
Internet Explorer error fix:
line 85 in mediabox.js is “if(window.ie6)...”
Should be “if(window.ie)..”
execute mediabox from .swf file with this code:
on (release)
{
getURL(“javascript:Mediabox.open(\‘http://www.lot-consult.com/container.swf\’, \‘LOT CONSULT – SITE\’, \‘mediabox[600 600]\’);void(0)”);
}
enjoy!
Hi, great work.
Is there a way to adjust automatically the canvas to images, if I use MediaBox[], a white space at right side is shown.
Another question, how can I group images for show it as a gallery?
I can’t find any doc. Sorry for the annoyances.
Hi, i love this tool!
In your test setup i don’t get
a close button in the movie window.
Is there an easy solution for this?
Sorry for my stupid question!
After taking time and following Troubleshooting, it works perfectly.
Great script first off, makes life very easy.
Then onto the problem/complication I have. The plugin works perfectly and everything displays as expected within the lightbox when the entire page has loaded. If the play link loads and there is still something else loading on the page and I click on the Play link, I either get a download box (for a .flv file which doesnt have a default player), or it displays the file in its own window if it is natively supported within the browser.
Is there anyway to get around this? Maybe force the javascript to init as it goes? The JQuery plugin (http://plugins.jquery.com/project/jquerylightbox_bal) seems to have kind of worked around it, but I cant find anything else on getting it to stop.
Hope this makes sense
Thanks in advance.
hey I really enjoy the work you have put into this site and have found a lot of your work useful.
Hi !
First thx for your nice mediabox !
It works great except when it’s loaded with Ajax call.
My mediabox code is in page2.html which appears on a div of page1.html with ajax call. I wanted to create a function to re-initialize mediabox after page2’s been loaded.
Maybe a little bit like this (for Lightbox) :
function charger_lightbox{
window.addEvent(‘domready’,function(){Lightbox.init({descriptions: ‘.lightboxDesc’, showControls: true});
});}
ow.addEvent(‘domready’, function(){
new pageLoader({loadInTo:‘Affichage’, onComplete: charger_lightbox});
new History();
});
But i didn’t manage so far…
Can you help me ?
thx !
cha
PS: sorry for my english i’m just french !
Hi,
Thanks so much for your previous reply. It really helped.
I encountered another problem though. I tried to load links with ‘rel=‘mediabox[..]’ in their tags through an xmlhttprequest ajax call. When I click on those links, they don’t call mediabox at all and just loads as a new page.
Tried using javascript calls to mediabox but that resulted in just a new page with a ‘false’.
You can see what I’m trying to do at http://manta.me.nus.edu.sg/tkm/announcements.php. Try typing ‘test’ in the search box and clicking on one of the results. Its supposed to launch a mediabox but it doesn’t.
What did I do wrong here?
Has anyone tried running mediabox with mediaplayer from within a curvycorners div? I’m getting a javascript conflict with the curvycorners code. If the link to my flv video is within the curveycorners box, the video tries to download instead of playing in the overlay. Video on the asme page but not on the curvycorners div will play fine.
Is it possible to use this script in combination with SWFobject 2.0?
Hey.
I just wanted to say that when you use mediabox for viewing images, the script introduces an iframe and places the image inside. Now, this in FF3 and IE7 (Safari works just fine) has a margin by default which is not 0, which causes scrollbars to appear in IE and the image to be scalable in FF. This imo is not desired. In order to fix this you have to add “marginWidth:0”, “marginHeight:0” to the properties of the iframe inside the JS (in the line below); or replace this:
this.object = new Element(‘iframe’).setProperties({id: this.iframeId, width: this.contentsWidth, height: this.contentsHeight, frameBorder:0, scrolling:‘auto’, src:url});
with this:
this.object = new Element(‘iframe’).setProperties({id: this.iframeId, width: this.contentsWidth, height: this.contentsHeight, frameBorder:0, scrolling:‘auto’, src:url, marginWidth:0, marginHeight:0});
I think it would be best if this was contained in the script by default for the next versions.
AWESOME!!!!!
Quick question: if I want mediabox to load on page load, how would I go about doing it? I found a way to do it for lightbox, but even after modding it, it didnt work with mediabox.
Basically I want mediabox to open when I go to www.someurl.com/index.html#anidofanel
Thanks!