05-07-2011

• Introduction
• Demo
• Features
• Compatibility
• Requirements
• Usage
• Download
• Get Help
• Changelog

Introduction

Slimbox is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the compact 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.11.

Features

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

• Slimbox is ready to launch as soon as the document is ready. This means that you don’t have to wait for all images of the page to be loaded before clicking on a link that will launch the Lightbox effect.
• Slimbox also centers images vertically on startup, not just horizontally. Vertical scrolling is still possible.
• It works perfectly on horizontal-scrolling websites.
• It temporary hides flash animations and other embedded videos while it is open to avoid display bugs in some browsers. It also hides select boxes in Internet Explorer 6.
• Using a special option (“loop”), it allows you to navigate between the first and last images.
• Slimbox is more responsive; it allows you to close it immediately at any time using the keyboard or mouse and to instantly navigate to any image before the current image has loaded or the animations are complete.
• The script is more robust; for example you can try to start and stop Slimbox or navigate between images very quickly to interrupt the animations and resume them and you won’t notice any bug like in the original Lightbox where sometimes the animation stops or the elements are wrongly sized or positioned.
• Slimbox can be launched from the traditional image links inside the page like the original Lightbox, but also directly from Javascript using its complete API.

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

• The code is optimized to an insane level and has been written from scratch with efficiency in mind for the MooTools framework instead of the huge Prototype/Scriptaculous. The script itself is as tiny as 4kb (minified, uncompressed).
• Slimbox can be entirely customized thanks to many options. You can change the duration of any effect, the counter text translation or even the navigtation keys.
• Slimbox has a much more powerful API, allowing you to apply the Lightbox effect easily on any clickable element or from any script. For example, it can be easily integrated with links pointing to Flickr or Picasa Web Albums pages or with any javascript image gallery.
• The Slimbox CSS are simpler and 100% valid (no more CSS hacks). Also, every visual aspect of Slimbox (including images) is specified in the CSS instead of the Javascript so it is easier to style. You may even change any border size in the CSS and Slimbox will still work fine, which means that nothing is “hard-coded” in the source code.

The total download size for the required modules of MooTools 1.1 + Slimbox 1.5, both minified and gzipped, is as small as 10 KB. Without gzipping, it’s 32 KB.

The total download size for the required modules of MooTools 1.2 + Slimbox 1.7, both minified and gzipped, is as small as 16 KB. Without gzipping, it’s 50 KB.

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

Compatibility

Slimbox 1.7 for MooTools 1.2 is compatible with all modern browsers: Firefox 1.5+, Internet Explorer 6+, Opera 9+, Safari 2+, Camino and Google Chrome (mootools 1.2.5 or more recent is required for Chrome 7+).

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).

Slimbox 1.5 for MooTools 1.1, which is also available, 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.

Requirements

Slimbox 1.7 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:

• Native: all
• Class: all
• Element: all
• Utilities: DomReady
• Fx: Fx.Tween, Fx.Morph (optionally Fx.Transitions)

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.5, which uses MooTools 1.11, 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.11, if you want a smaller total download size or if you need compatibility with older browsers like Safari 1.3, Firefox 1.0 or Opera 8.

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:

• loop: Boolean; if set to true, allows the user to navigate between the first and last images of a Slimbox gallery, when there is more than one image to display. Default is false.
• overlayOpacity: The level of opacity of the background overlay. 1 Is opaque, 0 is completely transparent. You can change the color in the CSS file. Default is 0.8.
• overlayFadeDuration: The duration of the overlay fade-in and fade-out animations, in milliseconds. Set it to 0 to disable the overlay fade effects. Default is 400.
• resizeDuration: The duration of the resize animation for width and height, in milliseconds. Set it to 0 to disable resize animations. Default is 400.
• resizeTransition: The transition that you want to use for the resize animation. You can choose amongst lots of cool transitions that are part of the optional “Transitions” module of MooTools, like Fx.Transitions.Elastic.easeOut. Many transitions require a longer execution time to look good, so you should adjust the resizeDuration option above as well. Default is MooTools’ default transition, sineInOut.
• initialWidth: The initial width of the box, in pixels. Default is 250.
• initialHeight: The initial height of the box, in pixels. Default is 250.
• imageFadeDuration: The duration of the image fade-in animation, in milliseconds. Set it to 0 to disable this effect and make the image appear instantly. Default is 400.
• captionAnimationDuration: The duration of the caption animation, in milliseconds. Set it to 0 to disable it and make the caption appear instantly. Default is 400.
• counterText: Text value; allows you to customize, translate or disable the counter text which appears in the captions when multiple images are shown. Inside the text, {x} will be replaced by the current image index, and {y} will be replaced by the total number of images. Set it to false (boolean value, without quotes) or "" to disable the counter display. Default is "Image {x} of {y}".
• closeKeys: An array of key codes of the keys to press to close Slimbox. Default is [27, 88, 67] which means Esc (27), “x” (88) and “c” (67).
• previousKeys: An array of key codes of the keys to press to navigate to the previous image. Default is [37, 80] which means Left arrow (37) and “p” (80).
• nextKeys: An array of key codes of the keys to press to navigate to the next image. Default is [39, 78] which means Right arrow (39) and “n” (78).

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

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>

I don’t recommend using 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 the latest standards.

API for Javascript programming

Additionally, Slimbox also allows you to:

• Launch Slimbox directly from Javascript code to display a single image or a collection of images.
• Register any link or DOM element for opening Slimbox when clicking.
• Change the way the image URL and description are retrieved from DOM elements.
• Create custom image groups based on any criteria.

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.71a for MooTools 1.2

Slimbox 1.58 for MooTools 1.11

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.71 (2009-11-19)

• Now Slimbox does not activate by default on mobile devices.
• Changed the default autoload code block to activate only on “a” elements instead of “document.links” which also includes “area” elements. “area” elements can still be used but not with the default Lightbox behavior because they do not support the “rel” attribute in a standard way.
• Upgraded the provided mootools.js to version 1.2.4.

v1.7 (2009-04-29)

• Fixed code for mootools 1.2.2.
• Upgraded the provided mootools.js to version 1.2.2.

v1.69 (2009-01-28)

• Fixed a bug in smart preloading which caused Slimbox to perform an unnecessary HTTP GET request.
• The Picasa Web Albums integration example script is now also compatible with square thumbnails.

v1.68 (2008-12-24)

• Fixed “next” and “prev” links not showing in Opera 9. This bug was introduced in the last version.
• Removed the 1px right margin CSS fix for IE6 and quirks mode IE7 (introduced in the last version) because it caused the 1px right margin to appear in Safari, Chrome and Opera instead. CSS update required.
• Small code optimizations.
• Added a fix in Slimbox 1.56 for MooTools 1.11 to make it compatible with Opera 9.5+ and Opera 9.3 for Wii. Sadly, MooTools 1.2 is not compatible with Opera for Wii.

v1.67 (2008-12-08)

• Keyboard navigation is now always enabled, allowing instant keyboard navigation to any image without having to wait for the images to load or the effects to complete.
• In supported browsers like Firefox and IE, images preloading is now stopped when Slimbox is closed or when the user navigates to another image. This saves server bandwidth and allocates the full bandwidth for the currently viewed image rather than old image preloads.
• Images are not cropped anymore in quirks mode IE (this was due to the IE box model bug). CSS update required.
• Select boxes are now hidden in IE6 only because IE7 fixes the select boxes problem.
• Code optimizations.

v1.66 (2008-12-02)

• New overlay implementation which works much better with standards-compliant browsers. A compatibility mode has been added for other browsers (IE6 and quirks mode IE7). CSS update required.
• Now fully compatible with horizontal scrolling websites (overlay + box centering).
• The images are now also vertically centered in the browser window on startup. Vertical scrolling is still possible.
• Added customizable keyboard navigation (as often requested) using new options: “closeKeys”, “previousKeys” and “nextKeys”.
• Added new options to set effects duration: “overlayFadeDuration”, “imageFadeDuration” and “captionAnimationDuration” which replaces “animateCaption”. Each animation can now be disabled by setting these options to 0.
• Removed the “showCounter” option, you can now set the “counterText” option to false or "" to disable the counter display.
• CSS: The bottom div block can now be styled with any border width, they don’t need to match the border widths of the center div block anymore.
• Many code optimizations.
• 3 useful extra scripts and a new example image are now provided in the distribution file.

v1.65 (2008-11-14)

• Regression fix: the code fix which hides select boxes in Internet Explorer to prevent them to appear above the overlay was mistakenly removed in v1.61. It is now working again.
• Upgraded the provided mootools.js to version 1.2.1.

v1.64 (2008-07-15)

• Fixed a bug where in some cases, Flash animations inserted using SWFObject would not show properly after Slimbox closes.

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

• Updated code for MooTools 1.2.
• Slimbox is now fully compatible with Opera 9.5+ and quirks mode web pages!

v1.52 (2008-06-08)

• Added the “loop” option to allow navigation between the first and last images of a Slimbox gallery, when there is more than one image to display.
• Fixed a bug which allowed to change the image while Slimbox was closing.
• API: The Slimbox elements functions now return “this” to allow chaining.
• Small optimizations.

v1.51 (2008-05-30)

• Fixed an error which occurred when Slimbox was used in combination with SWFObject in Firefox. Also fixes a memory leak in Internet Explorer.

v1.5 (2008-05-23)

• Most of the code has been rewritten with a new approach. It’s now much smaller! (4kb)
• Added the “overlayOpacity” option to specify the level of opacity of the overlay.
• Added the “counterText” option to specify a custom or localized counter text.
• Slimbox does not take up any space at the bottom of the page any more in some browsers.
• Now Slimbox does not wait for the caption animation to complete before enabling navigation. So you can navigate faster between images.
• Keyboard events are now captured when Slimbox is open to prevent page scrolls when using the arrow keys to navigate.
• You can now have two times the same image in an images set.
• The CSS file now includes Z-index definitions that are required if your web page design relies on elements with Z-index.
• The provided GIF images are now smaller.
• API: Slimbox now extends the Element and Elements classes. You can now associate a Slimbox gallery to any group of link elements using $$(elements).slimbox([options]).
• API: You can now specify different options for each group of link elements where you applied the slimbox([options]) function.
• API: When you call slimbox() on elements, you can now specify an optional filter function and an optional mapper function for maximum flexibility (see documentation).
• The Lightbox compatibility code is now fully optional. It’s implemented in a few lines using the new API and a filter function.
• API: The main entry point has been renamed from “Lightbox” to “Slimbox”
• API: Lightbox.show() and Lightbox.open() have been merged into Slimbox.open()
• The Slimbox distribution now includes MooTools, an example page and a Readme file.

v1.41 (2007-06-12)

• Fixed a small CSS glitch for “next” and “prev” zones display.
• Removed the IE “white noise” fix, it is now fixed by MooTools 1.1 (thanks digitarald).

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

• Updated code for MooTools 1.1.
• Added an option to hide the counter.

v1.31 (2007-05-04)

• Fixed the “white noise” bug occurring in dark areas of JPEG images in Internet Explorer.
• Visibility of objects (including Flash animations) are now set to their original values when Slimbox is closed, instead of always being set to visible.
• Re-added the hiding of <embed> tags. It was accidentally removed in v1.3.

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

• Updated code for MooTools 1.0.
• The caption now animates using a nice slide effect like the original Lightbox. CSS update required.
• Added an option to set any custom transition from the MooTools Transitions class for the resize animation.

v1.22 (2006-11-06)

• Now also hides <embed> tags while Slimbox is opened, not just <object> tags. Thanks Felix from Germany.

v1.21 (2006-11-05)

• Shorter code, slightly reduced file size.

v1.2 (2006-11-04)

• Fixed serious performance issues with long HTML pages in Internet Explorer.
• Fixed overlay not entirely covering the screen when the window is resized/scrolled in specific cases.
• Now bulletproof to overlay mad-clicking.
• Hidden objects now reappear after the overlay fade out effect instead of before it.

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

• Now Slimbox is ready to launch as soon as the DOM is ready.
• Added an option to disable caption animation.
• Optimized 2 lines of code.

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

• Initial release.

↑ ↑

Content, Code & Design © 2004-2011 Christophe Beyls. Valid HTML5 and CSS3.