multiBox
version 1.3.2
lightbox that supports jpg, gif, png, flash, flv, mov, wmv, mp3, html, iframe
features
- supports a range of multimedia formats.
- auto detects format or you can specify the format.
- supports html descriptions.
basic example
advanced example

This is an HTML description
photos by Aaron Birch
flv examplephotos by Aaron Birch
mov example
wmv example
real example
mp3 example
iframe example
ajax example
HTML element example
This is a snipet of html.
- list item 1
- list item 2
usage
add these javascript files to your page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="/js/overlay.js"></script>
<script type="text/javascript" src="/js/assets.js"></script>
<script type="text/javascript" src="/js/multibox.js"></script>
create your links like this
<a href="/myBigImage.jpg" class="mb" title="example title a"><img src="/mySmallImage.jpg" border="0"></a>
initialize the script like this
window.addEvent('domready', function(){
var overlay = new overlay();
var box = new multiBox('mb', {
overlay: overlay
});
});
requirements:
- mootools v1.2 core
- mootools v1.2 more - assets
- phatfusion - overlay
API
syntax:
var box = new multiBox(className [, options]);
arguments:
- className - (string)
- options - (object, optional)
options:
- initialWidth
- (number) the width of the box when it first opens while loading the item. Default: 250
- initialHeight
- (number) the width of the box when it first opens while loading the item. Default: 250
- container
- (element) the element that the box will take it coordinates from. Default: document.body
- contentColor
- (string) the color of the content area inside the box. Default: #FFF
- showNumbers
- (boolean) show the number of the item e.g. 2/10. Default: true
- showControls
- (boolean) show the navigation controls. Default: true
- descClassName
- (string) the classname of the divs that contain the description for the item. Default: false
- descMinWidth
- (number) the min width of the description text, useful when the item is small. Default: 400
- descMaxWidth
- (number) the max width of the description text, so it can wrap to multiple lines instead of being on a long single line. Useful when the item is large. Default: 600
- movieWidth
- (number) the default width of the box that contains content of a movie type. Default: 400
- movieHeight
- (number) the default height of the box that contains content of a movie type. Default: 300
- offset
- (object) containing x & y coords that adjust the positioning of the box. Default: {x:0, y:0}
- fixedTop
- (number) gives the box a fixed top position relative to the container. Default: false
- path
- (string) location of the resources files, e.g. flv player, etc. Default: 'files/'
- openFromLink
- (boolean) opens the box relative to the link location. Default: true
events:
- onOpen
- function to call when the box opens.
- onClose
- function to call when the box closes.
methods:
- create
arguments:
- path - (string) location of the media item
- options - (object, optional)
options:
- title
- (string)
- description
- (string)
- width
- (number) the width of the box. (not used for images)
- height
- (number) the height of the box. (not used for images)
- type
- (number) force the media type, e.g. image or html
- ajax
- load the html content in via ajax.
returns:
- (object) a new multiBox instance.


I’m totally not a programmer and I’d love to get this to work. My test thus far only opens the window with the loading animation. No image loads and closing window only removes transparent background. the window remains. Is there a simple trouble shooting solution? Does the Javascript go into the head or the body?
Hi!
What i need to do to launch MultiBox from Flash (AS3) using ExternalInterface.call()?
What the syntax of call() would be?
What i need to include into html file?
look at the create function within multibox, this allows you to pass in the info need to create a box.
Hello!
Help! Cannot find the error. Offline is all fine but on the server only the black frame with the the buttons pops up. But no picture, no action is being recognized and only refreshing the page can set the page back (the box cannot be closed).
What did I wrong?
Please can you post a link.
Hi Samuel, problem is solved! Thank you for your reply!
same problem, how did u solve it?
Thank you for this plugin. However it’s not working under IE7/8.
Below the details of the error :
User Agent : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0)
Horodateur : Mon, 25 Jan 2010 16:59:21 UTC
Message : Argument non valide.
Ligne : 195
Caractère : 63
Code : 0
URI : http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js
Message : ‘this.contentEffects’ a la valeur Null ou n’est pas un objet.
Ligne : 552
Caractère : 3
Code : 0
URI : http://www.phatfusion.net/_common/js/Interface/multibox.js
Best Regards
I figured out the conflict I was having. “Assets.js” was not Capped in the code provided, and the java is case-sensitive, so I was getting a an empty box and the loading animation until I corrected the code.
Thanks Ryan, the download has been updated.
I’ve corrected the problem under IE7/8. You have to remove the “px” from the line 490 in multibox.js ; like this :
this.contentContainer = new Element(‘div’).setProperties({id: ‘MultiBoxContentContainer’}).setStyles({opacity: 0, width: this.contentObj.width, height: (Number(this.contentObj.height)+this.contentObj.xH)}).injectInside(this.box);
Thanks for the fix, this has been added to the download.
Hi,
First of all, congratulations on the great work and very useful scripts!
One question, is there any way to have the option in MultiBox flv player to open a flash video in full screen?
Thanks.
Ed
Before I ask my questions I’d like to thank you for a really impressive plugin.
Questions 1. When I load content through AJAX, multiBox doesn’t show a vertical scroll bar. Is this a bug or a missing feature?
Questions 2. Loading content (a page) through AJAX if the url contains an anchor multiBox doesn’t scroll to the correct spot in the content. Is this a bug or a missing feature?
Hi there,
have problem with version 1.3.1. Works fine in demo but not on my side (picture goes up, but no navigation is shown and no overlay).
Firefox said: this.contentToLoad.desc.injectInside is not a function in multibox.js line 467
Please help.
thanx very much
w/best regards
Michael
I cannot get version 1.3.2 to work on the website I am developing. At all. This is very disheartening, as I have been using the previous version on another website with great success, and I was very much looking forward to a version that ran with the new mootools.
I uploaded all the appropriate files and added all the necessary code verbatim. I am completely flummoxed by this problem.
it works while i was developing the site on XAMPP environment but when i uploaded on the server, all the things work except that the photos doesnt load.. the loading gif image is kept displayin instead… kindly help.
i have the same problem … did you solve it?
Hi,
I’m getting conflicts with Jquery. Narrowed it down to the Jquery framework itself.
Already had to dismiss jquery lightbox techniques because of conflicts with another script, and now this
Do you know of any solution? As far as I know there shouldn’t be any conflicts with running 2 different frameworks.
Thanks.
@ryan
Hey,
All you need to do is to take a look into the page source and see how each example is constructed.
Generally speaking (no matter what you want to view via MB) multibox links have to be given class=”mb” + an unique id..
(so, for example, it’s <a href=”image_folder/big_image.jpg” title=”some title” rel=”nofollow”> ..and here goes a thumbnail image or text </a>)
..and there needs to be a some description preferably at the end of body (where id matches a particular element id=”" viewed in multibox, like ‘image1′ from the example above) containing each element description (html supported). You HAVE TO make mbdesc divs for each element even if you don’t use descriptions (then leave those divs empty within), otherwise title bar and arrows won’t display.
The example above regards images only. Other elements may require declaring their type in links rel= attribute or something, so once again – check and analyze this page source for each kind of element.
Hope you get it.
BTW. Phatfusion – finally! I’ve been dying to see this one. I’ve had to use some not-so-clean 1.2 port for last 2 years!
hey,
it is possible to set allowtransparency=”true” on the iframe?
@Ryan
@Chris Zippo
Hi everybody!
Thank you Ryan. Later after my contribution I read that you had the same problem. And you solved it. This was also my mistake, that I stored “assests.js” without leading capital letter…
Now it is runnig perfect. For me Multibox is one of the most amazing slideshows and have to thank the programmer very much! But nothing could perfect anough that it could not be improved… I searched very intensiv (also regarding other slideshows) about the possibility to build in an additional image with which downloads of the shown picture can be done – without success so far. Any advise?
Chris
Hello everybody!
I would like to plugon multibox 1.3.2 to mooflow 0.2, but i don’t know why it doesn’t work? it will be cool, if you can help me . I test :
onClickView: function(obj){var link = new Element(‘a’,{‘id’:obj.id, ‘href’:obj.src,’title’:obj.title, styles:{‘border’:'none’}});
box.open(link);
Before i initialize box by :
var box = new multiBox(‘mb’, {overlay: new overlay()});
So thanks in advance for your help
Mickael
Is it possible to make a multibox appear on top of a Youtube video (Object) or do I have to hide the objects when the Multibox appears?
Btw…this is by far the easiest “lightbox” I have seen with most options but a small file size. Great combi!
Hi,
I was wondering if anyone could help me, I am having trouble getting the multibox to open up at 100% width and height depending on what size the users browser is, but im getting some funny/weird loading box’s showing up (like its re-sizing) three times. Need help. (I dont really want all that tween’s and resizing going on)
I have done a bit of fiddling with the multibox.js but i don’t think i have been doing it right. lol
Any help would be much appreciated.
Cheers.
it works while i was developing the site on XAMPP environment but when i uploaded on the server, all the things work except that the photos doesnt load.. the loading gif image is kept displayin instead… kindly help.
For me Multibox is one of the most amazing slideshows and have to thank the programmer very much! But nothing could perfect anough that it could not be improved… I searched very intensiv
Nice Job !
I wanted to be fair and post an update to my previous comment. By removing the line “var overlay = new overlay();” and placing “overlay: new overlay()” in the option box, the script works perfectly. I am using it extensively on two websites so far. Thank you for all your hard work on this.
I cant seem to get this working following your directions. Any chance of a better setup guide?
Nevermind, I got it working. When I FTP’d the files over to my site, a few of them didnt make it. A re-upload solved the problem.
Hi all.
I discovered small problem with flash video in MultiBox.
Flash video will not start playing while it is not fully downloaded to the client machine. So, the progressive video is not working in MultiBox. I’m trying to edit the script so it would allow playing flash videos immediately as they are opened, but without success.
Anybody? Any ideas how this could be done?
Any help would be appreciated!
Thanks!
sprecho
Hi
This is a wonderful tool and it works quite well except the MP3 part.
It shows videos, even txt files, but it won´t load any of my MP3 files.
I used the example file and put in the a href the location of my MP3 and nothing happens.
What am I doing wrong?
Les
What are the chances you could implement groups the way that the original lightbox does (ex. )?
I have a lot of different image groupings on my page and its getting a bit code-heavy to make a different multibox class for each group of images so that they dont all group together.
Example – <img src=”x” rel=”lightbox [groupname]“>
Hello everybody, thanks for all the beautiful work around multibox!
I have only one question, how can I group images that are in the same page? I was using the rel= attribute but with no success at all.
For example, I have only one thumbnail that displays a larger image when I click on it, and a subsequent set of images related to that thumbnail.
The case is that when I open that particular thumbnail, the multibox shows the total quantity of images in the page.
I really appreciate your help, thanks a lot!
Claudio from Argentina.
Best way to do this is to create a new multibox for each group of images.