This tutorial explains how to use mootools and pathfusion multibox to implement a very nice lightbox on your website.
When an user clicks on a thumbnailed image, the script displays a big image preview in a window above all other page elements. The result is something like this:
You can download this tutorial using the following links which includes mootools framework and pathfusion script.
Download this tutorialStep 1: include CSS and Javascript
Create a new HTML page and add the following code into <head> tag to link mootools and multibox script/css:
<link href="multibox.css" rel="stylesheet" type="text/css" />
<script language=""javascript" src="mootools.js">
<script language=""javascript" src="multibox.js">
<script language=""javascript" src="mootools.js">
<script language=""javascript" src="multibox.js">
Step 2: add thumbnail images
Now, in the <body> tag, add thumbnailed images using this code for each image:
<a href="my_image_1big.jpg" id="mb1" class="mb" title="Add here image title">
<img src="my_image_1.jpg" width="200" height="118" border="0"/>
</a>
<div class="multiBoxDesc mb1">
For each image, you can add a short description here...
</div>
<img src="my_image_1.jpg" width="200" height="118" border="0"/>
</a>
<div class="multiBoxDesc mb1">
For each image, you can add a short description here...
</div>
...remember to change ID for each image link using a progressive number (mb1, mb2, mb3...) and the relative multiBoxDesc reference (in bold in the code above!).
Step 3: add the script
When you added all tumbnailed images you want, add below this few lines of code:
<script type="text/javascript">
window.addEvent('domready', function(){
new MultiBox('mb', {descClassName: 'multiBoxDesc'});
});
</script>
window.addEvent('domready', function(){
new MultiBox('mb', {descClassName: 'multiBoxDesc'});
});
</script>
It's all! Save and try.
Download this tutorialResources
For other infos about this post take a look here:
I am 
Thanks!
do you this for each individual page or do you do this in the edit html section?
Hi,
Since some months, I had been looking for a gallery images with content and
I find your work very interisting -for the moment, the most one-.
I'm interested in multibox, because I need to build in a static html page,
with a gallery of artists (nearly 30), which show some pictures (from 1 to
4), so I need sets of related images that I want to group and make
navigable. I see that this feature works well in lightbox, adding a group
name to the rel attribute after “lightbox”, inside square brackets;
is possible group the images in diferents groups in one html page, like in
lightbox?
Have a nice day!
Joan
Really nice script. It is really cool to have the option to add a description to images and no just a title like Lightbox or the other similar scripts.
However, the DIV class="multiBoxDesc mb1" shows up when I load the page. It doesn't seems to do it in your example maybe because you don't have much content.
Do you know how to fix this?
By the way, is this script cross browser?
Grazie mille amico!
I love the multi-box functionality, but the phatfusion.net usage explanation is horrible if your not very script familiar.
Azzurri!
i like it so much, but i need a little help here, in the title div i can place a text box and a button in order to send the image in the lightbox via email, but i cant use javascript to show and hide the panel that contains the txtbox and the btn ? any help !!
very nice! thanks for posting this.
quick note: it's phatfusion, not pathfusion