This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Saturday, January 12, 2008

Lightbox using mootools and pathfusion multibox

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 tutorial


Step 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">

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>

...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>

It's all! Save and try.

Download this tutorial


Resources
For other infos about this post take a look here:

blog comments powered by Disqus
Anonymous said...

Thanks!

black berry said...

do you this for each individual page or do you do this in the edit html section?

Anonymous said...

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

Jeremie said...

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?

Peter Michaels Allen said...

Grazie mille amico!

I love the multi-box functionality, but the phatfusion.net usage explanation is horrible if your not very script familiar.

Azzurri!

mohamed yosri said...

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 !!

Anonymous said...

very nice! thanks for posting this.

quick note: it's phatfusion, not pathfusion

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News