Slimbox

Slimbox, the ultimate lightweight Lightbox clone

Version: 1.8
Category: MooTools Javascripts

Introduction

Slimbox is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the MooTools javascript framework. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

Note: Slimbox 2 is now also available. It is using the jQuery library instead of MooTools.

Demo

Visit the Demo page to test the latest version.

You can also test Slimbox for MooTools 1.2.5 and Slimbox for MooTools 1.11.

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:

The total download size for the required modules of mootools 1.3 + Slimbox 1.8, both minified and gzipped, is as small as 24 KB. Without gzipping, it’s 73 KB.

By comparison, the download size of the original Lightbox 2.05 and its required libraries is 51 KB with gzip compression. Without gzipping, it’s 222 KB.

Compatibility

Slimbox 1.8 for mootools 1.3 is compatible with all modern browsers: Firefox 2+, Internet Explorer 6+, Opera 9+, Safari 3+ and Google Chrome 4+.

It works with both strict mode and quirks mode web pages.

Unlike many Lightbox-like scripts, it displays fine in case of horizontal scrolling of the web page.

It is disabled by default on mobile devices (Android, iPhone/iPod, Symbian, Windows Mobile, BlackBerry).

Older versions:

Slimbox 1.71 for mootools 1.2.5 is also compatible with Firefox 1.5, Safari 2 and Google Chrome 1-3.

Slimbox 1.58 for mootools 1.11 is also compatible with Safari 1.3, Firefox 1.0, Opera 8.x and Opera for Wii. It works with strict mode web pages only and support for recent browsers is not garanteed, so it is not recommended to use this version anymore.

Requirements

Slimbox 1.8 requires the MooTools framework, version 1.3 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 download the full MooTools Core or build your own version of it from the MooTools download page.

Slimbox 1.71, which uses MooTools 1.2.5, 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 website is still using MooTools 1.2 or if you want a smaller total download size.

Usage

Usage is exactly the same as for Lightbox by default, but Slimbox offers more options.

Because it was designed to be 100% compatible with Lightbox, you just need to 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 in the form of a javascript object inside the script (look for “put custom options here”). The default values should be just fine, however if you want you can change the following:

Example of a custom options object, including french translation:

{
	overlayOpacity: 0.6,
	resizeTransition: Fx.Transitions.Elastic.easeOut,
	captionAnimationDuration: 0,
	counterText: "Image {x} sur {y}",
	closeKeys: [27, 70],
	nextKeys: [39, 83]
}

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

Or, if you are using a right-to-left language:

<link rel="stylesheet" href="css/slimbox-rtl.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 (and the image width and height for the “Close” image) 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 caption, the margins in the caption and every color. You must not add new 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 even 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 just 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>

It is not recommended to use square brackets “[ ]” around group names in the rel attribute like the original Lightbox script does because these characters are invalid for XHTML and XML attributes, meaning that your web page would not validate against these standards.

API for Javascript programming

Additionally, Slimbox also allows you to:

Please read the complete API documentation to learn how to do this. The possibilities are limitless.

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.8 for MooTools 1.3

Slimbox 1.71a for MooTools 1.2.5

Slimbox 1.58 for MooTools 1.11 (deprecated)

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.8 (2011-08-21), requires MooTools >= 1.3.

v1.71 (2009-11-19)

v1.7 (2009-04-29)

v1.69 (2009-01-28)

v1.68 (2008-12-24)

v1.67 (2008-12-08)

v1.66 (2008-12-02)

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.


Your opinion about this software?

There is currently no comment.