I ran into Phatfusion’s Multibox while looking for a way to display MOV files in a lightbox fashion. I know, there are probably better ways to do it, but I was pressed for time, and Multibox happened to be sitting in the first page of my search results, so I went with that.
I liked the way the frame is styled and animated, but documentation was extremely lacking. There were a few things that I had to iron out before I could get it set up and working the way I want. If you’re running into problems making it work, the following checkpoints might be of assistance:
Update your paths
Multibox’s file structure might not be the most ideal for your project. I personally prefer having the files sorted into /scripts, /images, and /styles directories, depending on the file type. When you move the Multibox files around, update all path references to images and files in the following areas:
multibox.css: make sure that thebackground: url(…)s follow the correct paths to their corresponding images.ie6.css: look for and update the reference toiepngfix.htc.Note: when using relative paths, the path to
iepngfix.htcmust be relative to the page, not the stylesheet.iepngfix.htc: look for and update the reference toblank.gif.- The
<head>portion of your HTML: check the paths pointing to the relevant Multibox scripts and stylesheets. (As of version 1.3.1, the sampleindex.htmthat comes withmultibox.zipimproperly referencesoverlay.js.)
Pick the right (Moo)tool
Use only the version of Mootools that’s included with the download ZIP (v1.1.1, as indicated in the Requirements section). I tried a newer v1.2.1, and the script wouldn’t work at all.
Horizontal scrollbar problem
In my situation, a horizontal scrollbar appeared whenever I set the useOverlay flag to true. Apparently, this was caused by the frameborder value of the overlay iframe. To remedy, go into overlay.js and change 'frameborder': 1 to 'frameborder': 0.
Height issue with MOV files
When working with MOV files, the script doesn’t have a way to read the dimensions of the movie (a technical issue between Javascript and Quicktime formats, I suppose), so I had to explicitly define the dimensions via the rel attribute. I also had to add 16px to the height option to accommodate the playback controls that the Quicktime plugin adds to the bottom.
I appreciate the horizontal scroll bar issue…. been driving me a little nuts. Been using multibox for a couple different projects. that solved one of my issues with it. Thanks for posting!
I have been using it as well. Love the animation and styling. Yes, I firmly agree the docs could be a little more clear. Other than that I love it.I’ve been looking for a way to have just one link open a gallery. Do you have any suggestions? Great write
@Copper: I would assume that the ability to page through the images is automatically inserted by the Multibox script. Not sure if this is the best way to do this (or if it would work, at all), but I would put all the images of my gallery in the HTML, then hide all but the first element using CSS.
Anyone know if there’s a way to get rid of the quicktime controls?
@Nicolas: You could cover it up with the Multibox frame by subtracting 16px from the original height of the movie (though this will chop off a bit from the top as well, since the video is centered vertically inside the frame).
But more importantly, why would you want to remove the Quicktime controls? You’re essentially restricting the user’s control over the playback of the movie.
One more question if anyone is reading. I’ve been attemping to launch a window using multibox, then have a number of html text links with that launched window that would allow the user to choose which image/movie/whatever they wanted to look at via the multibox window without having to use the arrows to scroll through everyone. Any ideas? My first attempt actually had a multibox open within a multibox!
Please does anyone know how to launch Multibox from JavaScript? Instead of just the Href tags?
Thanks in advance.
Response to Trish (a little late)
I routinely launch with javascript commands. I made a custom function for multibox that is simlar to one used in lightbox++ called GroupDelegate. You still place an href tag in your code referenced by ‘id’,
(there is a an open function and a close function (GroupDelegate and lbClose))
then use the following example:
var box = {};
window.addEvent(‘domready’, function(){box = new MultiBox(‘mb’, {descClassName: ‘multiBoxDesc’, useOverlay: true});});
function GroupDelegate(id) {
box.open($(id));
}
function lbClose(){
box.close();
}
hope that helps… Burley
thank you so much. i will try
Great post. Multibox is great but like you say, the docs are severely lacking (as with all the phatfusion stuff). I had the latest version of mootools.js and it just wouldn’t work. Thanks again for the page!!
Hey Copper,
This is similar to lightbox for multiple images with a single link. If you notice on the Multibox home page they have 3 images. If you click on the first you get a box which you can click through to the flv and other files in that list. reference your gallery images with an BUT PUT NOTHING HERE!!
Hope this helps – sorry I’m late :-)
Sorry – Didn’t realize I can’t put tags in ……
Create hyperlinks for all your gallery images but don’t put anything between the tags that will display on the page. (that’s how I always did it anyway. It worked)
Gallery images look quite good with this.
Anyone using Multibox with swfObject? For some reason, it works flawlessly with Mac-based browsers but not on Windows browsers (ie, ff and Chrome). The swfObject div just covers the box when it opens… also, ie doesn’t even open the box… it just directs to the page I linked to it.
This is in response to Mark talking about image galleries. I’m not sure how to implement this. Would I go about doing it just like a lightbox gallery?
How would the HTML markup look for a one thumbnail, that when clicked, could then navigate through a series of images?
hello all. i’m trying to get multibox to work on a site and i’m getting the dreadful
(new Element(“div”)).addClass(“MultiBoxContainer”).injectInside is not a function
error. anyone knows what’s up with that? as far as i can tell, the js files are all referenced correctly as well as the path:’foo’ option of the multibox constructor.
Hi, I have a couple of things that I’m having problem with. I got the horizontal scroll bar problem fixed but now I’m having problem with vertical scroll bar. When I use the overlay feature, my page becomes really long resulting in unwanted vertical scroll bar. Do you happen to know the cause of this and would you mind sharing the solution for this?
Another thing is that I’d like to group up several images into sets. This is possible with Lightbox but I couldn’t find any documentation whether or not it’s possible and how to do it. Well this is a secondary problem. The main issue that’s bugging me is the vertical one. Please help if you would. Thank you!
Great post sharing with us. The use of multiple box is mosewhat similarity…
Okay this is quick, I’m no programmer so I don’t know if this would be the real solution but I just found a way to create sets of images. Thought I’d share it here for those who happens to want to have sets of images with their Multibox.
Add the end of your DIV tag where you have the javascript tag, copy the one line starts from
box = new Multibox(‘mb’,
and paste it underneath it. Rename ‘mb’ to something else; perhaps your sets name.
So it would be something like this:
var box = {};
window.addEvent(‘domready’, function(){
box = new MultiBox(‘mb’, {descClassName: ‘multiBoxDesc’, useOverlay: true});
box = new MultiBox(’set1′, {descClassName: ‘multiBoxDesc’, useOverlay: true});
});
After much faffing about I would like to add that it is important to make sure the the extra CSS bits that you add to your own CSS file also point to the right directories. I found the easiest way was just to make every reference absolute… for example I just added to all the relevant urls and paths and that sorted all my problems…
Thanks everyone.
../multibox/
Hello,
I’m using multibox and I like to use it to show videos. However when I put a web URL in the link tab (for example : http://www.liamsmart.co.uk/Downloads/multiBox/Files/curly.flv), the player doesn’t play anything.
Did I miss something?
Thank you for your help.
Of course I mean the link “tag” (a href=…) and not “tab”!
Thanks!
hello all,
anyone else having trouble with multibox and ie and firefox on pc regarding .swfs?
i have a .swf playing and some multibox thumbnails, and when the user clicks on a thumbnail multibox launches but the .swf is on top of it…
any ideas??
thanks!
Sounds like a classic case of SWF content taking the topmost layer. Have you tried setting the WMODE of the SWF to “transparent”?
I have lightbox itself working but it will not load and play either my flv or my wmv files. The flv is on the same server as the page and the wmv is on a windows streaming server. The lightbox does not even load the respective players.
Any help would really be appreciated.
Dave
Hi, hopefully someone is still checking this post.
I have two issues.
1. In IE6 I can’t see my controller on the overlay. I can see it in all other browsers. Has anyone else had this problem.
2. The href images are making my page push down under my footer, making the page scroll. I think it is the javascript overlay that is hidden. You can see it here. http://www.vvsol.com/vvsRD2/work/multibox/files/index.html. I cannot figure it out.
If someone is having the same issue I was having the page becoming long and scrolling past the footer. Check out this link. It fixed my issue.
I still don’t understand the control images disappearing in IE6 so if anyone can help with that I would appreciate it.
thanks
oops! Forgot the link: http://neophyteman.wordpress.com/category/discover-multibox/