Introduction

Slimbox is a 4kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.

Demo

Single images

Image set

These are pictures of the renovation of the Atomium here in Brussels.

Features

From a functional point of view, Slimbox has the following added features compared to the original Lightbox:

From a design point of view, Slimbox is very different from Lightbox:

And of course, it has been tested in all modern browsers: Firefox, Internet Explorer 6+, Opera 8+, Safari 2+ and Camino. It is not compatible with the old Internet Explorer 5.5 and will never be.

The total download size for the required modules of mootools + Slimbox, both minified and gzipped, is currently as small as 16kb.

Requirements

Slimbox 1.6 requires the mootools framework, version 1.2 or more recent. Because mootools is modular, you can make your download smaller by only downloading the modules your scripts are actually using. Here are the core modules required by Slimbox:

The Slimbox download package already includes mootools with the above dependencies only. If you need more dependencies for your own scripts or want to use a different mootools version, you have to build your own version of mootools on the mootools download page.

Slimbox 1.5 is using mootools 1.11 and is also available for download. It provides the same features set as the latest version. Its dependencies are detailed in the provided readme file. You may need to use this version if your entire website is still using mootools 1.11 or if you need compatibility with the old Safari 1.3.

Usage

Usage is exactly the same as for Lightbox, with an extra feature in the “activate” part.

Because Slimbox was designed to be 100% compatible with Lightbox, you can just replace the scripts combination “Prototype + Scriptaculous + Lightbox” with “Mootools + Slimbox” in the header of your pages and your Lightbox effects will work just as well as before. Well, a little better.

Setup

1. Include the script in the header of your page, after the inclusion of the mootools framework:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>

There are some options that you can specify inside the script. The default values should be just fine, however if you want you can change the following:

Example of a custom options object:

{
        overlayOpacity: 0.6,
        resizeTransition: Fx.Transitions.Elastic.easeOut,
        counterText: "Image {x} sur {y}"
}

2. Include the CSS file in the header of your page, or add it to an existing CSS style sheet:

<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

If you keep the provided CSS as is, you must place the 4 required images in the same folder as the CSS file. Of course you can change the images or move them to another place, then you just need to edit the CSS URLs to reflect your changes. You don’t even need to edit the javascript.

You can also change the fonts for the caption and the image counter, the width of the border around the lightbox, and the background color. You must not change or add other CSS rules.

Activate

Add the rel="lightbox" attribute to the links pointing to your full-sized images. Use the optional title attribute if you want to show a caption:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

You can event use HTML in the caption if you want. You must replace the < and > characters with HTML entities and use single quotes instead of double quotes.

For sets of related images that you want to group and make navigable, add a group name to the rel attribute after the “lightbox” word, for example:

<a href="images/image-1.jpg" rel="lightbox-atomium">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-atomium">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-atomium">image #3</a>

I don’t recommend using square brackets “[ ]” for groups in the rel attribute like the original Lightbox scripts does because these characters are invalid for XHTML and XML attributes, meaning that your web page would not validate against the latest standards.

API for Javascript programming

Slimbox.open()

Alternatively, you can also launch Slimbox using Javascript to display a single image or a collection of images.

For a single image, just call the following method, passing the URL of the image as first parameter and optionally a title as second parameter:

Slimbox.open("images/image-1.jpg", "Spheres in construction");

Et voilà.

Download

Slimbox is free software released under MIT License.
If you like it, talk about it and promote it by linking to this page.

Slimbox 1.65 for mootools 1.2

Slimbox 1.53 for mootools 1.11 (NOT compatible with Opera 9.5+ or quirks mode web pages – you have to use strict mode – BUT compatible with the old Safari 1.3)

Get Help

First, please read the FAQ .

If the answer of your question is not there, you can ask it on the Slimbox Google Group.

Please note that I distribute Slimbox “as is”, I don’t get any money for it, and therefore I have no time to do support for it and I won’t answer trivial questions.

Changelog

v1.65 (2008-11-14)

v1.64 (2008-07-15)

v1.63 (2008-06-10), requires mootools >= 1.2.

v1.52 (2008-06-08)

v1.51 (2008-05-30)

v1.5 (2008-05-23)

v1.41 (2007-06-12)

v1.4 (2007-05-21), requires mootools >= 1.1.

v1.31 (2007-05-04)

v1.3 (2007-02-05), requires mootools >= 1.0.

v1.22 (2006-11-06)

v1.21 (2006-11-05)

v1.2 (2006-11-04)

v1.1 (2006-10-29), requires mootools >= revision 83.

v1.0 (2006-10-22), requires mootools >= revision 77.

↑ ↑

Content, Code & Design © 2004-2008 Christophe Beyls. Valid XHTML and CSS.