multiBox - for MooTools 1.2 - now with groups!


Old version is now redundant! Please upgrade to this new version.New version with groups!

multiBox is a reworked version of Phatfusion´s brilliant multibox so that it will work with MooTools 1.2. There are many extra options including the option to group elements!

Just add a group surrounded by square brackets and the script will only navigate between those with the same group.

You add the group in the links ‘rel’ tag. ie: rel="[group_one]".

On this page, the images are grouped, the flash files are grouped, and the videos are grouped. If no group is specified, multiBox treats the link as a single object and navigation buttons will be disabled.

Another point worth mentioning: you can now override the description on single multiBox element by simply adding ‘noDesc’ into the ‘rel’ tag. ie: rel="noDesc" or if you have more than one ‘rel’ value already rel="[group_one],noDesc". This adds flexibility so you are not tied to either using/or not using descriptions on all elements. The second image on this page is using this feature.

For accessibility & usability purposes, I have also added keyboard shortcuts. "spacebar" or "right" = next, "left" = previous and finally "esc" = close. Someone pointed out to me that the overlay doesn´t fade away in the same way as it fades in. I have sorted that issue with a simple chain.

MooTools has a built in ‘Tips’ class. This is simply a more stylish way of displaying an elements title tag (plus more if you wanted to expand but I have left it as purely the title tag). Because the code is already in the MooTools library, I thought I may as well include this feature. There is the option to disable it of course.

People keep asking me how they can get multiBox to automatically open on pageload. Well it´s easy! Just use the following code:

//auto open multiBox on page,initMultiBox.multiBox);

The number represents the element on the page you want to open. Remember arrays begin at 0, so the first element on the page is element 0.


Image 1
This is my description text 1. It can support html.
Image 2 Image 3
This is my description text 3. It can support html.
Image 4
This is my description text 4. It can support html.

Other file extensions

.swf example
.swf example by Ashley Warren
.mov example
.mov example
.rmvb example
.rmvb example
.wmv example
.wmv example
.mp3 example
.mp3 example
.flv example
.flv example
HTML page
HTML page (Ajax)
html (ajax)
HTML element
html element

This is a snippet of html.

Download new multiBox