Milkbox - Lightbox for Mootools 1.2
By Luca Reghellin


Hi! First of all, my english is not so good: please be patient with my mistakes. For anything wrong, as well as for debug questions and suggestions, you can try to send me an e-mail: I usually don't have much time, but I'll try to answer you.
Once upon a time you could also find some forum posts in mootools.net; now you'll find some post in mootools users google group: http://groups.google.com/group/mootools-users/

What's Milkbox

Nothing special: just another lightbox clone, but this time is written for Mootools 1.2. I needed it, so I decided to write my own, and since someone else could need it, I think it's time to share it.

Inspiration comes from Slimbox, a mootools 1.11 lightbox clone written by Christophe Beyls (http://www.digitalia.be/software/slimbox) and of course from THE VERY FIRST MAN ON THE MOON: Lokesh Dhakar, and his fabulous Lightbox: (http://www.lokeshdhakar.com/projects/lightbox2/).

With the v1.1, a couple of features that were asked in the forum topic have just been added:

With the v1.2, I added the autoPlay() method: you can activate it via the options object, or you can call it manually. See the how to notes.

With the v1.3, it hides select and textarea tags while playing; also, there's a new option (removeTitle) that let you decide if the browser will pop up or not his default tooltips when you hover the Milkbox links. Defaults to true.

Something different

To tell you the truth, Milkbox is not EXACTLY like the other clones. In fact, there are two or three things that make it a little different (but non necessarily better):

Take a look

Photos by Retinafunk

And here you can see a couple of customizations, maybe quite 'unorthodox', but it's just for the sake of showing the possibilies: example 1 - example 2.
For an autoplay example, see below, note # 7

How to use Milkbox

Use it just like the other lightbox clones:
  1. Make sure that there is a XHTML DOCTYPE declaration at the very top of the page. XHTML transitional or strict are good.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. Include the milkbox.css file in your page. Make sure the referenced images are in the right location. I suggest to leave them in the milkbox css folder.
    <style type="text/css">
        @import url(css/milkbox/milkbox.css);
    </style>
  3. Include the mootools 1.2 js library. The core js must have the following components:
    • - All Core, Native, Class and Element components.
    • - Utilities: domready, selectors
    • - Fx: all
    You also must include Assets, Fx.Elements and Group from the "more" components
    <script type="text/javascript" src="js/mootools-1.2-core-yc.js"></script>
    <script type="text/javascript" src="js/mootools-1.2-more.js"></script>
  4. Include the milkbox.js file.
    <script type="text/javascript" src="js/milkbox.js"></script>
  5. Add a rel="milkbox" attribute to any link tag to activate the Milkbox. Optionally, add a title attribute. If you have a set of related images that you would like to group, include a group name between square brackets in the rel attribute. If you want to add tags inside the title property (for example a link), please use html entities and no quotes, then eventually style them with css: the relevant id is #mbDescription.
    <a href="img/01b.jpg" rel="milkbox[gall1]" title="Caption goes here...">image #1</a>
    <a href="img/02b.jpg" rel="milkbox[gall1]" title="Caption goes here...">image #2</a>
    <a href="img/03b.jpg" rel="milkbox[gall1]" title="Caption goes here...">image #3</a>
  6. Additionally, you can launch it directly from a javascript call. Use the showThisImage Milkbox method and pass it the path of the image as the first parameter and the description as the second, optional parameter.
    Milkbox.showThisImage("img/01b.jpg","Caption...")
  7. AUTOPLAY. [v1.2] You can run it by setting the autoPlay and eventually the autoPlayDelay options in the js, or via the setOptions() method, in an onload event (domready doesn't work properly in IE6..). Any time you'll click a Milkbox link, autoplay will start from that image. If you'll eventually use the next/prev buttons while autoplay is running, it will be stopped.
    <script type="text/javascript">
      window.addEvent('load',function(){
        Milkbox.setOptions({autoPlay:true,autoPlayDelay:5})
      });
    </script>
    You can also run it manually, passing and object with gallery, index and delay options.
    The gallery option only makes sense if there are more than one image gallery in the page (see point 5). Milkbox has a galleries array property, so, for example, if you want to activate it for the second gallery, you can pass it like this:
    { gallery: Milkbox.galleries[1] }
    The index option is the image from where you want to start the autoplay. Defaults to 0.

    The delay option needs no explanation. You pass it in seconds, not milliseconds. Defaults to 7.

    An example with all the options:
    Milkbox.autoPlay({
      gallery:Milkbox.galleries[1],
      index:3,
      delay:5
    });
    » See it in action

How to customize Milkbox

You can customize the following properties by modifying the milkbox.css file (see comments inside):

You can also customize the following options by modifying the milkbox.js file (see comments inside), or eventually you could pass them to the constructor:

Tests

A little note: using Milkbox in a page that contains flash objects, you must set their wmode property to 'opaque' or 'transparent'; also, in some cases, I had troubles with Firefox on Apple computers, due to a known Gecko rendering bug, that has been just fixed in the Firefox 3 beta.

To embed flash objects in my pages, I personally use the SWFObject 2.0 library: http://code.google.com/p/swfobject/

Download Milkbox

> Here's the Milkbox link. [Milkbox (with all assets): about 80Kb + demo files: 635Kb]
Please note that Milkbox+mootools+css+buttons themselves are only about 80 Kb total in size! The extra weight is due to the included photos of the demo page.

> And here's the buttons [990 Kb (.psd and .ai)]

Donate

If you maybe would like to give me some little money, do it with paypal:

Donate for Milkbox