Introduction
Slimbox is a 7kb 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:
 | 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 launching the Lightbox effect. |
| The left and right arrow keys can be used to navigate through images, and the ESC key can be used to close Slimbox (Warning: in Mozilla browsers, the ESC key is also used to stop GIF images from animating). |
| The dark background overlay can be clicked anywhere to close Slimbox, even on the parts located on the left and right of the image. |
| The script is more robust; for example you can try to start-stop Slimbox very quickly to interrupt the animation then resume it and you won’t notice any bug like in the original Lightbox where sometimes the animation stops or the captions are wrongly sized. |
| Slimbox temporary hides flash animations and other embedded videos while it is open to avoid display bugs in some browsers. |
| Slimbox can be launched from the traditional image links inside the page like the original Lightbox, but also directly from a Javascript call using a special method. |
From a design point of view, Slimbox is very different from Lightbox:
| The code has been entirely rewritten with efficiency in mind for the mootools framework instead of the huge Prototype/Scriptaculous. The script itself is as tiny as 7kb (uncompressed). |
| The Slimbox CSS are simpler and 100% valid (no more CSS hacks). Also, all images used by Slimbox are specified in the CSS instead of the Javascript so it is easier to style. |
| Slimbox does not use the 1 pixel transparent gif image needed by Lightbox. |
And of course, it has been tested in all modern browsers: Firefox, Internet Explorer 6+, Opera 8+, Safari 1.3+ and Camino. It is not compatible with the old Internet Explorer 5.5 and will never be. If you still notice any bug, please post a comment below.
The total download size for the compressed version of the required modules of mootools + Slimbox is currently as small as 26kb.
Requirements
Slimbox 1.4 requires the mootools framework, version 1.1 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 modules required
Download at Slimbox: http://mootools.net/download
| Class: all |
| Native: all |
| Element: Element.Event |
| Window: Window.DomReady, Window.Size |
| Effects: Fx.Style, Fx.Styles (optionally Fx.Transitions) |
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. First make sure that there is a XHTML DOCTYPE declaration at the very top of the HTML pages where you want to use Slimbox, so the browser will work in standards-compliant mode. The DOCTYPE must be XHTML 1.0 transitional, XHTML 1.0 strict, or XHTML 1.1. Example, for XHTML 1.0 transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Important: Do not add a XML prolog before the DOCTYPE. If you add one, IE6 will not work in standards-compliant mode and Slimbox will not display correctly in this browser.
2. Include the script in the header of your page, after the inclusion of the mootools framework:
<script type="text/javascript" src="js/mootools.v1.1.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>There are some options that you can change in the script. The default values should be just fine, however if you want you can change the following:
| resizeDuration: The duration of the resize animation for width and height, in milliseconds. |
| resizeTransition: The transition 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.elasticOut”. Many transitions require a longer execution time to look good, so you should adjust the resizeDuration option above as well. |
| initialWidth: The initial width of the box, in pixels. |
| initialHeight: The initial height of the box, in pixels. |
| animateCaption: Boolean; set it to false to disable the caption animation. |
| displayCounter: Boolean; set it to false to disable the counter at the bottom (“Image X of X”). |
3. 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 “lightbox”, for example inside square brackets:
<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>Alternatively, you can also launch the Lightbox effect using Javascript to display a single image. Just call the following method, passing the URL of the image as first parameter and optionally a title as second parameter:
Lightbox.show('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.
| File | slimbox.zip [6.82kb] |
| Description | Slimbox 1.4 |
| Last updated | 2007-06-13 20:30 |
| Downloads | 34038 |
Get Help
You can ask questions on the freewebs farms forums.
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.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.
|
