largerBox has received a massive update! First of all, the function interface has changed! It now is no longer a snippet, it has been namespaced and organised:

var largerBox = {
    version: function() {
        return 2.1; // 17/05/2009 14:18:40
    },
    init: function(options) {
        // by default it works on image links with the class 'fullImage'

        // set other defaults.
        var options = $merge({
            selector: "a.fullImage",        // can pass on any A object or array of objects, need to contain links to images.
            styleBorder: "1px solid #000",  // border style around image
            useShadow: false,               // apply a css shadow after image is drawn
            useModal: true,                 // use a modal window (toggleModal function) or not
            useTooltip: true,               // uses element.tooltip prototype (needs it defined, set to false if not avail)
            colourModal: "#555",            // default colour for modal,
            imageBackground: "#fff",        // useful to have one for png or gif with transparency
            zIndex: 1000000000              // default z-index for the enlarged images
        }, options);

This post uses the following code to instigate the lightbox on the image above:

largerBox.init({
    selector: "a.newimage",
    useModal: true,
    useShadow: true,
    colourModal: "#fff"
});

The style and effect are somewhat different from our traditional style, visible on the image below:

Anyway, you can grab the latest dci_core library and search for the string largerBox. Dependent functions from dci_core are toggleModal and the element.tooltip prototype, both are optional though.

I saw the animation apple do when viewing a trailer (non-HD) on their modal box and decided to replicate the effect for my image viewing in mootools.

Examples of largerBox v3.0 (animations / morphs / tweens don’t work too nice over iframes, mind)

UPDATE – 24/11/2009 largerBox is in the process of being refactored. largerBox v3 – beta 1 is available to look at and play with. It features a totally drag and drop solution – CSS is built into the javascript class, so are the images for next/previous and close. That’s right, there are no files to edit, updated, upload — aside from your images. Check the new source here: /js/largerBox.js

How does it work?
In the normal way, it takes a <a href=’imagename.jpg’> … </a> and attaches itself to the click event, not interfering in any way with your html. All you need to do is add ‘class=”fullimage”‘ to the anchor tag and fraggedBox will do the rest.

What do I need to get this to work?
You need to grab a copy of mootools 1.2.x – core.

You then need to grab the latest beta. Just look at the demo page anyway…