Slimbox 2, the ultimate lightweight Lightbox clone for jQuery

Version: 2.05
Category: jQuery Javascripts


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


Single images

Gilles at BarvauxGates gets a pie

Image set

These are pictures I took during a journey through India and Nepal in 2008.


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

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

Slimbox 2 is currently the smallest Lightbox-like script available for the jQuery library.


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

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

Note: there is a bug in Google Chrome versions 4 to 8 for Linux with many non-english locales, causing the overlay to stay invisible when Slimbox is opened. This bug does not affect other operating systems and was fixed since Chrome 9.


Slimbox 2.05 requires the jQuery library, version 1.3 or more recent. If you don’t already have it, you can download jQuery from its official website.


Usage is exactly the same as for Lightbox by default, but Slimbox 2 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 “jQuery + Slimbox 2” in the header of your pages and your Lightbox effects will work just as well as before. Well, a little better.


1. Include the script in the header of your page, after the inclusion of the jQuery library:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slimbox2.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,
	resizeEasing: "easeOutElastic",
	captionAnimationDuration: 1,
	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/slimbox2.css" type="text/css" media="screen" />

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

<link rel="stylesheet" href="css/slimbox2-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.


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-cats">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-cats">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-cats">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:

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


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

Slimbox 2.05

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.


v2.05 (2013-05-07)

v2.04 (2010-04-28)

v2.03 (2009-11-19)

v2.02 (2009-01-28)

v2.01 (2009-01-12)

v2.0 (2008-12-31)

Your opinion about this software?

  1. Thank you so much for this. I was eagerly awaiting the port to jQuery and you didn’t disappoint. Slimbox is absolutely the best lightbox clone I have ever seen.

    — rubycat    31/12/2008 11:09    #
  2. Wow, cool! I’ve been using the Slimbox WordPress plugin and it’s been great. I really like it because it’s much smaller than Lightbox. Would you be able to say what the total size of Slimbox2 + jQuery would be in comparison? Right now mootools and Slimbox are about 15KB + 3KB compressed with gzip.

    It looks like you have it combined into digitalia.js here.

    Nick    02/01/2009 20:54    #
  3. Uhhhh… :-( What about Mootools?

    Bleyder    02/01/2009 23:22    #
  4. Don’t be sad, the MooTools versions are still up-to-date and I will probably maintain them for some time, at least for bug fixes and compatibility issues with new browsers like I did with Slimbox 1.5x for MooTools 1.11.

    A few benefits of using jQuery compared to MooTools:

    1) jQuery and Slimbox are self-contained and have less chances to conflict with other scripts/frameworks. I’ve seen many cases where MooTools was causing conflicts and people were complaining about Slimbox not working.
    2) jQuery is more widely used (Wordpress, Drupal, Textpattern, …) and people want to use the same javascript framework for all the scripts on their website.
    3) jQuery is actively developed and tries to preserve compatibility across versions. The MooTools 1.1 API was completely different from the MooTools 1.0 API which forced me to rewrite the script because Slimbox did not work anymore. Then they did it again with MooTools 1.2. In comparison, Slimbox 2.0 is already fully compatible with jQuery 1.3 without any change.

    I still believe that MooTools is a great javascript framework and a pleasure to work with. I try to use standard tools whenever possible and jQuery seems to emerge as the standard lightweight javascript framework. The main benefit of MooTools was its small size and modularity but today MooTools Core and jQuery provide more or less the same features for the same file size.

    Christophe Beyls    03/01/2009 03:41    #
  5. Nick: I don’t say the total file size anymore because it’s irrelevant. Slimbox 2 is for people who are already using jQuery and jQuery is not divided into smaller pieces like MooTools is so jQuery is a little bigger download than the minimal MooTools build that is provided with Slimbox 1.x. But jQuery is already used by many websites and it’s now also hosted by Google which means that it will not cost you more website bandwidth if you use this version, and if someone visits 2 sites using the same Google-hosted version, it will only need to be downloaded once. The Google-hosted version is also gzipped automatically for a much smaller download. Gzipped, Slimbox itself is a little less than 2 KB.

    If you are not already using other JS libraries and want the smallest possible total download size, I suggest you to use Slimbox 1.56 (for MooTools 1.11) which is now also compatible with every browser I’ve tested so far including Opera 9.5+ and Opera for Wii.

    Christophe Beyls    03/01/2009 04:04    #
  6. Christophe,
    I just wrapped your JS into a WordPress plugin:

    I know there’s already one or two that wrap an older slimbox, but they seemed short on features and didn’t include this version (which I tracked down while trying to find a jQuery solution for my site).

    I’m still getting everything in order for a proper release, but I figured I’d post a link here so you could check it out yourself.

    I’m still new to writing plugins and such, so if you have any issues with these please let me know.

    Thanks for a great javascript tool that uses jQuery and let me know what you think of my plugin!


    Greg    05/01/2009 00:21    #
  7. Hi Greg,

    Your plugin looks cool, even if I did not test it because I don’t use Wordpress myself. The next version seems promising and I’m happy to see that I dit not create those “extra” scripts in vain.

    I suggest you to use YUICompressor instead of Dean Edward’s Packer for compressing the easing plugin. After Gzipping, the Packer version becomes bigger than the minified one and unpacking adds a small overhead too.

    Christophe Beyls    05/01/2009 03:53    #
  8. Hi,

    I’ve a site based on Wordpress with OpenBook v2.2 theme. This theme uses the MooTools 1.11 library. So I want to integrate SlimBox v1.56 to my site. But for now, I’m not happened. Is there a plugin compatible SlimBox MooTools 1.11 for Wordpress?

    Thanks a lot.

    Reply from the author: Please post support questions on the forum instead. Also, I don't do support for third party plugins but I've spent a lot of time writing documentation and the API of Slimbox 1.5x is identical to the API of Slimbox 1.6x so it should not be too difficult to adapt an existing plugin yourself.

    — Elekaj    05/01/2009 07:11    #
  9. Many thanks for the new jQuery version Christophe! First day back at work for me today after Christmas and this cheered me up no end. As it happens, I’ve been working on a site where the MooTools version of Slimbox was conflicting with jQuery code, so this is very good news for me and many others too I’m sure. I just find jQuery so much easier to work with than MooTools. Thanks again :)

    Janine    05/01/2009 13:00    #
  10. Christophe,
    It’s me again. I just tried implementing your autoactivation script and discovered it’s broken!
    I get the message “this.href.test is not a function”.
    I’ve tried to fix it myself, but haven’t had a chance to look at the code, and there’s a good chance I’d still be clueless. It looks like it might’ve been a holdover from when you were using mootools?

    Anyway, just thought I’d let you know.

    Thanks again.

    Greg    05/01/2009 21:51    #
  11. Whoops, you’re right, I used String.test(regexp) which only exists in MooTools. Regexp.test(string) must be used instead.

    Please look at the diff to see what you must change to make it work.

    Christophe Beyls    05/01/2009 22:55    #
  12. i have to say, you have done a fantastic job with slimbox, and i look forward to using it very soon as a component in my site after its major overhaul. thanks again!

    mike    06/01/2009 06:27    #
  13. Hi Christophe, great work again, thanks! I’m currently using a homegrown lightbox I wrote ages ago. But I’m not using it only as a lightbox, but as a general popup for alerts, the login, iframes and videos.

    I like your code very much and think about making it the foundation of a new version of my popup. All it would need was callback-functions on start, ready and close and the possibility to display other content than an image.

    This can’t be so difficult and I’m not asking you to write the thing for me, but I like to know if you could think about evolving the slimbox into that direction.

    Let’s be more concrete: The alteration would be – 3 options for the callback functions – an exception, if its not an image -> use passed in dimension and generate a link inside the lightbox with the same href as the trigger

    all the rest could be handled by the “ready” callback function

    I’d really appreciate not to have to fork your work, so I’d be glad to here your thoughts about that

    — felix    07/01/2009 23:58    #
  14. nice!
    i used thick box, seems equal…:)

    shaid    08/01/2009 11:12    #
  15. Thank you very much, Christophe !
    Very fast start. Your Slimbox is the first lightbox that works on all my browsers.
    Рекомендую всем! Очень качественная вещь!

    — vk    08/01/2009 19:35    #
  16. Do you know How i can implement auto-resizing on images?

    — juan Manuel    08/01/2009 22:38    #
  17. Anybody knows which lines i need to amend in order to allow Slimbox to auto popup window when page loads?

    Appreciate any help. Thanks!

    — wl    09/01/2009 03:36    #
  18. I’m going to have to try this new jQuery Slimbox. The Mootools version has given me problems with the “Internet Explorer cannot open the Internet site – Operation aborted” bug when I use other JavaScript on the same page. I had to mess around with the loading order and put all the scripts at the bottom of the <body>.

    For JavaScript compression I’ve been using this page:
    It compares four different compression tools and then lists the results before and after gzip compression.

    Nick    10/01/2009 00:41    #
  19. Hi – thanks heaps! It worked and is the only image effect js that I could find online that would work, I’ve tried every single plugin on Wordpress to try and get the lightbox effect and Slimbox is excellent – cheers jj@mash

    JJ    10/01/2009 06:02    #
  20. This slimbox doesn’t work with a slideshow:

    Do you have an idea about that? or another lightbox compatible with it.

    Reply from the author: Please post support questions on the forum instead. Your "barack slideshow" uses MooTools 1.2, you should use Slimbox 1.6x for MooTools 1.2 instead (it provides the exact same features). You can use Slimbox 2 but then you'll need to add jQuery to your page (which will result in a bigger loading) and set jQuery to compatibility mode by calling jQuery.noConflict().

    — mike    10/01/2009 17:57    #
  21. I’ve used your original slimbox for a while, and love how lightweight it is compared to the other bloatware script out there. This is perfect timing. I was just looking to implement lightbox on a site that uses jQuery, and didn’t want to add MooTools on top of that. Installed and working perfectly.

    As a ps (in case anyone else has trouble) I found it didn’t work with jQuery 1.2.2. Replaced with v1.2.6 and it works fine. You might want to update the ‘requirements’ to specify the more recent version.

    Thanks again for a great script!

    Sophie Dennis    10/01/2009 19:08    #
  22. Slimbox 2 is good small script, but it possible still adjust two things:

    1. I want completely disable background overlay(page shadow effect) since don’t like it. Or uncomment this part if possible. I want show just popup image without any extra effects.
    2. I want to disable light box “expanding effect”, that show expanding white box, and image appears only after this effect. I want show only popup image with some css border around.

    How make this changes, can anyone show me tips??

    — Galactic    12/01/2009 22:14    #
  23. I managed to adjust it myself, very easy, just adjusted values specified at the begining of this page. Great script.

    — Galactic    12/01/2009 23:40    #
  24. Thanks for maintain the Mootools version for some time!!.

    I hope I’ll take in the future the sufficient mootools knowledge to maintain it for myself.

    Bleyder    13/01/2009 15:28    #
  25. Christophe,
    A few things. First, I wanted to let you know that shortly after it’s release my WordPress plugin of Slimbox 2 did extremely well. It’s tapered off a bit, but will likely grow again whenever I release an update.
    While working on the next release, I tried out the Flickr and Picasaweb scripts. Flickr works great, but the Picasaweb script appears to fail, and instead just loads the thumbnail.
    It’s quite possible that I’m doing something wrong, but I tried it on:
    <a href=“”><img src=“” alt=“Test2” /></a>

    Also, any chance for a script to utilize Gallery2 sites (obviously people would need to add their gallery url)?

    When I get a chance I’m going to try and write one myself, as well as one for the WordPress Gallery, but my understanding of Regular Expressions is pretty bad. If I manage to hash one out I’ll share it with you.

    Thanks again for an excellent resource.

    Greg    14/01/2009 17:12    #
  26. Hi christophe, I’m not sure I can speak french in here, so let’s have it english:

    I have been using Slimbox for quite some time now, and at the time, I slightly modded the MooTools version to have a nicer look.

    I just switched to jQuery, and I also modded this version, but this time, I thought I’d share it =) !
    Only a few lines differ from your version, it’s really no big deal, but I think the design could suit some people around !

    I also tweaked the CSS a bit, with different options for those using .png-compatible browser, the main difference beeing the “next” and “previous” arrows: round, semi-transparent with firefox, while rectangular and white with IE6.

    here’s a link to a blog post where images are all in a gallery with captions, so you can see everything in action:

    thanks again for developping such a great modal box !

    Augustin    14/01/2009 20:38    #
  27. Hi there, firstly thanks for this awesome plugin!

    I tried to implement it on one of our sites and pressing the close button seemed to spawn a new window in IE7.

    I fixed it by changing the following code:

    <a id=“lbCloseLink” href=”#” />


    <a id=“lbCloseLink” href=“javascript:close()” />

    This might have just been a compatibility issue as this site was also using mootools from ages ago although i did have compatibility turned on.

    Caroline Clifford    15/01/2009 16:11    #
  28. Christophe,
    Having broken down the regular expression you used I came to realize the picasaweb script works just fine, so long as the thumbnail director doesn’t have anything other then s and some numbers, since I had a -c in it it broke. I don’t know much about picasaweb, but it would appear the -c option makes the thumbnail square, which might make it a common enough feature for people who want a square gallery.
    Assuming it is common, and I interpreted what was happening correctly, I revised the script as follows:
    return [el.firstChild.src.replace(/\/s\d+\/([^\/]+)$/, “/s640/$1”),
    is replaced by:
    return [el.firstChild.src.replace(/\/s\d+(-c)?\/([^\/]+)$/, “/s640/$2”),

    As stated before, I’m not very good with regular expressions, nor do I know much about picasaweb, but this might be helpful to someone who stumbled onto the problem I did.

    Greg    15/01/2009 17:16    #
  29. you dont need to convert HTML entities to include html into description!! :)

    Reply from the author: If you don't do it, your document will be invalid HTML.

    Bad Guy    17/01/2009 07:33    #
  30. I didn’t see how I can link my picasa web gallery to this plug-in….ideally, I would love to have a text link open the thumbnails, and then click on the thumbnails to have the large image…thoughts?

    Reply from the author: Again, please ask support questions on the FORUM. The Picasa integration is a way to transform links to Picasa pages (not images) into Slimbox links by using the URL of a thumbnail located inside the link. Without the thumbnail URL, it's impossible to guess the URL of the full-sized image. You can however create a text link pointing to the Picasa-hosted full-sized image, like you would do for any other image.

    — lukeMV    24/01/2009 23:45    #
  31. Hi, Christophe!
    I use Slimbox2 about 3 weeks. Now i need some enhancement. Would it be possible that Slimbox2 change images in light box without any effects?
    I don’t like white box that appear while image changing. Thank you.

    Reply from the author: Please ask support questions on the dedicated FORUM after reading the documentation and the FAQ. To disable the image fading you just need to set the imageFadeDuration option to 1, like explained in the documentation.

    — vk    26/01/2009 09:05    #
  32. Am currently using the Coppermine integration with Lightbox plugin (see on my Wordpress site, but am very interested in the low footprint of Slimbox 2. Am unsure how I can replace the Lightbox plugin that’s built into that with this Slimbox one. Any advice would be greatly appreciated.

    Dave Webb    27/01/2009 16:10    #
  33. Do you have any plans to support html, and flash in slimbox2?

    — Brandon    27/01/2009 20:23    #
  34. This is fantastic, I’m dropping mootools now, this will make my life so much easier. Thanks!

    Matt    27/01/2009 21:35    #
  35. Do you have any plans to support html, and flash in slimbox2?
    same quz?

    العاب    31/01/2009 22:14    #
  36. Thanks for a great plugin!

    One question though, it does not seem to work on the safari browser of the iphone. It works on Safari for windows but on the iphone I get the following:

    1. Only the top part of the page is darkened, about the height of the viewport (+ / – the top 400px of a page)
    2. The large image itself is located at exactly the middle of the page (most of the time out-of-view)

    I have understood that jquery is supposed to work normally on the iphone, but just the same I´m not sure if it is a jquery or a slimbox2 problem.

    Does anybody know how to get slimbox2 working on the iphone?

    — jeroen    03/02/2009 21:03    #
  37. Wow ! Yes, totally great lightbox plugin ! Best ever ! Thanks so much !

    Simon    04/02/2009 10:57    #
  38. Please kindly tell me how to enable horizontal scrolling of the browser window when the browser window is smaller than the Slimbox2 image so that one can view the whole image by scrolling horizontally and can therefore also view the Next and Previous buttons. This has been asked in the forum but remains unanswered. Thank you (and thank you for a great script!).

    — Joel    05/02/2009 04:39    #
  39. This is a fabulous script. It adds so much professionalism to our website. Thank you for creating it. I love the way it works.

    Angelo    05/02/2009 07:13    #
  40. This was my first post and I didn’t put the proper page that the lightbox was on. Here is the proper link to the lightbox I am using. Thanks again for a fantastic script.

    Angelo    05/02/2009 07:17    #
  41. Hmm.. Im not a JS geek, but I think that something is wrong with new version. I jused 2.01 and replaced it with 2.02 version. And nothing works:/ I tried FF, IE6+ and O and lightbox does not show.
    You can check gallery at (ver. 2.01 is used) and everything works perfectly. But when I replaced slimbox2.js file everything goes wrong.

    Gabriel Zastawnik    07/02/2009 16:44    #
  42. I feel like a dope, but I just can’t get it working, I’ve copied the example very closely but just can’t get it to work.

    — Nathan    07/02/2009 22:48    #
  43. You did an excellent work. I’ve used the mootools version before. Cause i used wordpress a long time i searched for a good jquery lightbox – can find any good.
    So i very glad to see you make a jquery version of slimbox.
    Only one feature i wish for the next version: is it possible to configure that large images will fit/scale into the screen? Best by an option-flag, that will be great.

    Keep on the good work.
    Greetings from germany.

    Volly    08/02/2009 11:32    #
  44. OMG auto-activate? no more rel or class tagging. brilliant. Hopefully it will work on blogger. This is perfect for it since my blog fetches other posts of blogs. And to think I was gonna bother y’all with the question.

    William    08/02/2009 13:31    #
  45. This is great work. Had really been looking forward to this and was not disappointed. THANKYOU for breaking from the stupid illegal attributes.

    BUT! In my test page (, I can’t get the slimbox to center correctly. This only happens in Webkit/Safari. In Firefox all is well. Is there a place to file this bug, or am I doing something wrong?

    Reply from the author: Slimbox relies on jQuery to compute the window dimensions. Try to switch to jQuery 1.2.6 if you are using the brand new jQuery 1.3. I'm now using 1.3 on this website and so far it seems to work fine with recent browsers. If the issue occurs only on your website, it must be related to some strange javascript or CSS.

    Jason Petersen    09/02/2009 12:22    #
  46. Slimbox does not work when I try using the UNcompressed slimbox2.js. It does work with the compressed version, though. Any thoughts? Thank you, in advance.

    Reply from the author: The source code is divided in 2 files. You have to include them both for the script to work.

    Robert    09/02/2009 22:08    #
  47. Awesome script! I’ve implemented it via Greg Yingling’s WP-Slimbox2 WordPress plugin ( for my blog, and am very very pleased! Great work.

    Steve    11/02/2009 00:48    #
  48. just a suggestion.
    It might be cool if you would be able to choose where the script gets its description for a picture from when it pops up.
    I have all of my pics decribed by the description fields, but when people click on the pictures, the description are not shown on the bottom of each picture. So this might be a cool impovement for you script :)

    Reply from the author: It's alreeady possible to do that. It's explained in the API documentation.

    — Spyro    11/02/2009 03:21    #
  49. A note about compatibility. It is said that this script is 100% compatible with the original Lightbox 2. But this is not entirely true. I have used the Lightbox 2 in websites with dynamic ajax reloading. When I try the same with this script it stop working probably because need some way of refreshing.
    But in any case this is a fantastic script.

    nikola    13/02/2009 15:21    #
  50. Is there a way to enable anchors so that linking to an open slimboxed image works. Maybe this would also enable the back button when flipping through images. Is this possible in Slimbox2?

    Ed    15/02/2009 05:50    #
  51. For starters get rid of body{width:960px} in test.css, that can’t be healthy

    Ed    15/02/2009 14:55    #
  52. Hi,

    Just installed this fantastic script on my site as a Image Set.

    It shows the images as it should but the Next / Prev buttons are missing.

    Is there any customcode I need to enable in order to see them?



    — Jesper    15/02/2009 18:35    #
  53. Hi,

    I found the solution about the next / prev button. You simply need to add the pictures (prev and next), they where not present in the package. The images are set in the css, and the class to look for are


    good luck :-)


    — Jesper    15/02/2009 19:27    #
  54. Hello,
    I would like ton know how to install lightbox on my blog. I use dotclear 2.
    Thank you.

    Jeff    16/02/2009 09:25    #
  55. Hello, great plugin. I’m a jQuery fan and i’m refactoring a simple web site in which i need to use a photo album. I have a question: How do i make the Next and Prev links to be always displayed? I don’t want the user to move the mouse over the picture to find the links. Is there a way to make them be always displayed? Thanks!

    — Fernando Fiaux de Moraes    16/02/2009 12:53    #
  56. I’m looking for ‘jQuery lightbox’! Thanks! jQuery rules!

    Majesticskull    17/02/2009 12:13    #
  57. Very impressive, integrated well in Actinic eCommerce software, very fast, easy to use and compact.

    Malcolm Brook    17/02/2009 16:22    #
  58. There is one thing I’d like to see on Slimbox2 – It sould shrink images to fit window size. At the moment when a really large image is used, you can’t scroll to see whole image. Vertical scrolling is ok, but horizontal is endless – image gets centered while scrolling to right. Shrinking to window size would also make it easy to close Slimbox or to navigate.

    It is not a “must have” but more a “really nice to have” feature.

    — Aivo Paas    17/02/2009 23:35    #