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.

As long as I'll have the time to do it, I'll try to help anyone who ask for some help with Milkbox implementation or for little customizations, but I'll definitely favour people that make a donation (see the bottom of this page).

Main features

Ready for HTML5. Milkbox is tested under html5 doctype and uses the new data- properties.

Swf support. You can visualize swf files with Milkbox.Use the data-milkbox-size attribute to tell width and height that Milkbox should be resized to when showing the swf file.

Html support. You can also visualize local or remote html pages with Milkbox. They'll be loaded inside an iFrame, so you must use the data-milkbox-size attribute to tell width and height that Milkbox should be resized to when showing the page.

Vars. You can pass variables to swf and html files by simply appending them as regular query strings to the url of the files.

AutoSize and autoSizeMaxHeight options. AutoSize is enabled by default; if needed, it makes photos smaller, so they'll fit the browser window. If you want them not to be higher then a certain height, just set the autoSizeMaxHeight option.

AutoPlay and autoPlayDelay options. You can set them globally or on a per-gallery basis, as well as in JavaScript calls.

Centered option. If you want, you can set Milkbox so it will stay centered on the screen.

XML galleries. Instead of writing HTML links and let Milkbox to automatically collect them, you can write one or more galleries via XML and load them with the addGalleries() method. You can then show any file of any gallery with a single JavaScript call.

JSON galleries. Instead of writing HTML links and let Milkbox to automatically collect them, you can make it build galleries from JSON objects via addGalleries(). You can then show any file of any gallery with a single JavaScript call.

Launch from JavaScript. You can use open() to launch any gallery item with custom autoplay options from JavaScript and therefore, even from Flash via ExternalInterface.You can also use the openWithFile() method to visualize a single file on the fly without the need of building a gallery first.

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

ImageOfText option. If your lang is not english, and you do not want to see "1 of 15", just use this option. I'm italian, so I usually set it to 'di'. Defaults to 'of'.

Transitions are minimal (in fact, with v3 there's only 1 for every file): I like fast navigation. Anyway, you can use any of the MooTools's Fx.Transitions effects. Just set the resizeTransition option.

Next and prev buttons are in the bottom section, near the close button. This way I think I make it more usable by not hiding anything and keeping the navigation all in one place.
Also there's a loop in the next and prev buttons: if Milkbox is showing the last image in the gallery and you click the next button, it will let you see the first image; similarly if you're seeing the first one, the last one will be shown by clicking the prev button.

Add a data-milkbox attribute to any 'milkbox' link.If the linked file is not part of a gallery, set the data-milkbox prop to 'single'; otherwise, just choose an arbitrary name for the gallery.
Optionally, you can add a caption by setting the title property of the link tag. 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 #mbox-caption.

How to customize Milkbox

// CSS Properies

You can customize the following css properties by simply modifying the milkbox.css file (see comments inside) or the DOM elements via setStyle/setStyles. The relevant DOM elements are written in brackets (only for js programmers):

How to use Milkbox (advanced)

// Custom Events

- Use onXmlGalleries when you want to know if an XML file is completely loaded. See the XML Galleries paragraph for details.

- Use onClosed when you want to do something immediately after Milkbox is closed.

- Use onFileReady when you want to do something when the current file is loaded and ready to be showed. The current file is milkbox.currentFile.

// AutoPlay

You can set it globally via the autoPlay and autoPlayDelay options like described in the 'Global JavaScript options' paragraph.
If you use an XML gallery, you can set different autoplay options for every gallery.
Finally, you can override the options on a per-gallery basis by using setAutoPlay() (described below):

But what's autoPlay? Well, yes, it's that! ;)
Milkbox will sequentially show all the files in a gallery, with a pre-defined delay between each.
You will be able to stop it either by clicking the play/pause button or the next/prev buttons. You will then use the play/pause button to re-start it.

Use of setAutoPlay(object or array of objects)

You use setAutoPlay() if you want to permanently override the global autoplay options for one or more galleries.
You can pass it an object or an array of objects. Every object should have 3 properties: gallery (string), autoplay (boolean), delay (number).

// Launch Milkbox from JavaScript

Instead of clicking a link, you can launch Milkbox directly from JavaScript (and therefore even from Flash, via ExternalInterface), usign the open() method for galleries, or openWithFile() method for single files without the need of build a gallery first.

Use of open(gallery (string or instance of MilkboxGallery),index)

You use open() if you want to launch Milkbox directly from JavaScript. You can launch any gallery, starting from any file.
You can pass open() the name of the gallery (so, a string), or, if you're an advanced programmer and are for some reason using an instance of MilkboxGallery, you can pass it directly.

// External galleries

If you don't need to write HTML links, but still want to use Milkbox to show some gallery, you need to define them in some other way. Enter the External galleries (XML and JSON galleries). Both types are loaded into Milkbox using the addGalleries(string or object) method

XML GALLERIES

To use xml galleries, first of all, you need to write an xml file, for example:

As you can see, for every gallery you must use div tags with class="gallery" and set the name property. Optionally, you can add custom autoplay options for every gallery.
Please note that, since it's an xml document, tags are NOT real html tags, and the link tags must be empty tags, so you close them with a space followed by a slash ((an empty space)/>), not with a close tag like this: </a>

Once you have your xml file, load it with the addGalleries() method:

milkbox.addGalleries('galleries.xml');

Now you can use all the Milkbox methods with the new galleries. I think you'll at least use open(), but before doing it, it's safer to be sure that the xml file is really loaded, so you should wrap it in the onXmlGalleries custom event:

// Reload galleries

Often, using Ajax, links and galleries change without fully refreshing the main page and therefore without updating the internal Milkbox galleries.
To solve these kind of issues, you can simply use the reloadPageGalleries() method. For example, a generic Ajax application could do something like this:

There's also an utility method to clean all the external galleries already loaded (xml and json), and optionally load some new one. The method is resetExternalGalleries(list: single string/object or array of objects); you pass new galleries as the list parameter.

Notes

Tests (on Win and Mac Os X):

If your page includes flash movies:

if you use Milkbox in a page that contains flash objects, you must set their wmode property to 'opaque' or 'transparent'.

Javascript compression:

If your site is running on an Apache server with an active deflate module (usually it's active by default, or you can ask your provider to switch it on for free) you could telling it to serve your js/css files gzipped. To do that, I usually write one of these lines in a .htaccess file (published in the root dir of the site):

Software, plugins and people

Milkbox is also used by other developers all around the world for various softwares and plugins.
Please tale a look to the followings:

Feindura - Flat file cms

http://feindura.org
Feindura is a Open Source flat file based Content Management System for Web Designers and ideal for small and medium websites. There is no need of a database and it’s easy to integrate in your Websites.
(It uses milkbox for its image gallery.)

Mootools-FileManager

Gerrit E.G. Hobbelt

https://github.com/GerHobbelt
Ger Hobbelt uses Milkbox in some of his projects and helped me a lot in fine tuning v3.0.0.
He is a 20+ years of experience working as a software engineer, enjoying both systems architecture and hardcore development with a focus on security, stability and survivability of the product. Currently (as per 2011) the action is happening at a financial analysis and prognosis package with a strong focus on web technology and plenty of exiting math to drive the coding.