Slimbox WordPress Plugin
WordPress plugin used to overlay images on the current page into neat Javascript-powered overlay popups.
This plugin includes the new Slimbox 1.64 javascript written by Christophe Beils and got transformed into a WordPress Plugin by me. 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.
Because Slimbox was designed to be 100% compatible with Lightbox, you can just replace the Lightbox 2 WordPress Plugin whit Slimbox Plugin and your Lightbox effects will work just as well as before.
Use the title attribute if you want to show a caption. Click on the images below for an example.
Installation
- Upload slimbox-plugin folder to the /wp-content/plugins/ directory.
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- Add a rel=”lightbox” attribute to any link tag to activate the lightbox, or rel=”lightbox[roadtrip]“ for image set.
- Optional: Use the
titleattribute if you want to show a caption. - If you want to add automatically the lightbox effect to your post’s images, open lighbox.php and remove the comment ‘//’ from lines 21 to 24.
Single example:
<a href=”img1.jpg” rel=”lightbox” title=”my caption”>thumbnail1</a>
Image set example:
<a href=”img1.jpg” rel=”lightbox[roadtrip]“>thumbnail1</a>
<a href=”img2.jpg” rel=”lightbox[roadtrip]“>thumbnail2</a>
<a href=”img3.jpg” rel=”lightbox[roadtrip]“>thumbnail3</a>
Tnx to my sister for the photos! Link me in your site!
Changelog
Version 1.3 (22-08-2008)
Update Slimbox to version 1.64
- v1.64
- Fixed a bug where in some cases, Flash animations inserted using SWFObject would not show properly after Slimbox closes.s.
- v1.63, requires mootools >= 1.2.
- Updated code for mootools 1.2.
- Slimbox is now fully compatible with Opera 9.5 and quirks mode web pages!
Version 1.2 (09-06-2008)
Update Slimbox to version 1.52
- 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.
Version 1.0 (29-07-2007)
First version.
Download Slimbox WordPress Plugin
If you appreciated this plugin or my support, donate me so i can buy a cup of coffee, tnx u!
[...] 9. Slimbox Slimbox ist der kleine schlanke Bruder der Lightbox. Mit ihm lassen sich die Bilder der Thumbnails wunderschön auf der Seite darstellen. Muss man selbst gesehen haben. Weitere Infos und Download [...]
[...] around with WordPress for another homepage which will have a lot of pictures I discovered the slimbox plugin which I think is really [...]
[...] slimbox wordpress plugin/ [...]
[...] Slimbox Plugin: Ver imagem maior, com um efeito ajax muito bonito. [...]
[...] Slimbox – http://www.4mj.it/slimbox-wordpress-plugin/ [...]
[...] WordPress plugin used to overlay images on the current page into neat Javascript-powered overlay popups. This plugin includes the new Slimbox More Blog Resources [...]
I really would like to use this plugin, I’m following the directions specifically, but when I put it in, I have the same problem as others… it just takes me to a new page with the photo, no lightbox. It’s almost as though the plugin is not working.
Hi JD,
There’s a script error on your site, so it’s possible not all the code might be executing properly?
And as if by magic it’s not showing any errors now lol.
Sorry I can’t be of any more assistance: where are you using the slimbox in the site?
Actually, I went and tried a different lightbox plugin and it worked fine. I wonder if there’s something in my site that keeps it working with yours. Thanks for your help.
[...] Plugin Homepage [...]
Nightfalcon:
Hey JD,
maybe you’re just too fast in clicking the links of the pictures. Wait until the browser says “finished” or similar (depends on browser, i’d say) in its statusbar. Then all scripts and graphics are fully loaded.
THAT is the time you can click the pictures. If you click them earlier (when the browser’s statusbar says something like “reading this and that”), the links work just as usual: they lead you to another page: the picture in its original size.
[...] Slimbox Plugin 1.0 Lightboxを軽量にしたもの [...]
Robert:
Fix for “IE and “Operation Aborted”-Error: http://greyviper.com/slimbox-wordpress-plugin-internet-explorer-cannot-open-the-internet-site-operation-aborted-culprit/ would be nice to see this fix in one of the releases 
it works fine with my ie, i don’t know why u have this problem…
15 Best WordPress 2.3 Plugins
Which are the best and most important plugins that must be installed and used? In this post I will present you some Plugins every blogger uses on his blog. You should use them too!
1. Akismet
the best comment spam protection this side of dodge. It for…
The instructions are not full and it does not works. compare it with:
Can it add this code automatically to every image in wordpress blog? So I do not have to?! Nothing works in 2.3.2.
1. Add a rel=”lightbox” attribute to any link tag to activate the lightbox or rel=”lightbox[roadtrip]” for image set
Is hard to understand.
[...] the nice people who actually visit these pages from time to time. I have installed a plugin called slimbox (thanks Phil) into the WordPress engine that chugs along behind this blog and shall now attempt to [...]
Kasper Sorense:
For some reason you have to make sure the plugin resides in exactly /wp-content/plugins/slimbox/
I had mine in the folder /slimbox-plugin because that was the folder it was extracted to.
The plugin looks in that folder for your .js files, thats why you need to name it properly so they can be found.
Robert:
@Peppe: it failed when I inserted the deezer.com-radio-widget into my blog; so I found out about that bug.
[...] می تونید برای مشاهده نحوه کار این اسکریپت به این آدرس رفته رو روی یکی از ۲ تصویر موجود کلیک [...]
[...] Slimbox very cool slideshow pop up http://www.4mj.it/slimbox-wordpress-plugin/ [...]
oooo! very nice…ı love this plugin 
[...] Slimbox, che implementa nel blog lo script Lightbox, attivabile su un’immagine semplicemente aggiungendo, l’oramai famosa, rel=”lightbox”. [...]
Christian:
First of all: thanks for the great little plugin – I guess SlimBox is the best of all Lightbox derivates. Being able to use this thing for the WordPress-site that I’m currently building is a real pleasure. However, it took me a whole hour to find out why I couldn’t get it to work. The cause for the error was a jquery.js that my WordPress theme uses to slide the sidebar. As soon as I commented the line out of my header, Slimbox worked just fine. I don’t know if this “bug” has been mentioned here before… if not, my advice could possibly help someone finding out why Slimbox fails.
[...] trouverez SlimBox sur le site de 4mJ.it (blog italien mais les articles sont en anglais). Voici 2 exemples de ce que vous pouvez faire avec [...]
[...] festgehalten. Nur streikt auf meinem Blog momentan das neu installierte Lightbox-Plugin „Slimbox„, mit Hilfe von dem ich die Fotos euch präsentieren [...]
[...] to bự Lightbox đã được thay bằng một plugin nhẹ hơn hẳn dựa trên mootools – Slimbox . Về cơ bản, Slimbox tạo hiệu ứng không khác g
[...] 5. Simbox A good way to let your readers enlarge your images without tranferring them to another page, this plugin will overlay images on the current page. Download [...]
I suddenly got a problem with this, it loads, but stops and I see no picture. It happens the same here. I guess its my computer. At home it worked after I removed my antivirus and spyware program. Not sure which of them blocked it, but it worked after I removed them
[...] plugin—WP-highslide Posted by Mayick in WordPress 试用了三个WordPress plugin：slimbox、highslide、lightview，最终选择了highslide。 [...]
[...] Slimbox : La version de slimbox pour WordPress. [...]
[...] slimbox [...]
Is there a way to have the rel=”lightbox” automatically written in all images?
I post a lot of stuff from my phone and I cannot edit the html.
Cheers and congratulations for the plugin!!
s t u r g i s : )
yes sturgis, open slimbox.php and de-comment function slimbox_create and the second add_filter.
Thanks Peppe!!!
Another question: Is there a way to resize the pictures when they are clicked? If I send a picture from my phone it is 2Mega pixel. If you click in it, then becomes bigger than some screens. Is there a way to limit the size to 640 for instance?
Cheers!!!
No, i don’t like stretch images, i prefer resize them with an image editor…
Shiit is happened!(c)Forrest Gump
[...] 使用例リンク [...]
[...] Slimbox Plugin – Slimbox built for WordPress to display images in the pop-up overlay on the page instead of a new page. Looks awesome and works well (most of the time). I use it for galleries and any images that need to be seen larger than a thumbnail. [...]
[...] Slimbox : La version de slimbox pour WordPress. [...]
hello there!
Just wanted to know if there’s any way to update the image list in ajax loaded content? Lightbox as something like “updateimagelist” method… Is there anything similar?
Thanks
arvid:
ok, no code allowed..makes sense. the string is (but with proper html)
(a href=”somesite”)(img src=”someimage.jpg” /)(/a)
becomes
(a href=”somesite”)(img src=”someimage.jpg” / rel=”lightbox”)(/a)
still – is there a way around this, perhaps first looking for a link, storing that as a string and THEN making the replacement IF there’s an image within that?
/A
Hello, thank you for a very nice plugin. I experience an interesting phenomenon whenever browsing my photos when they pop up with slimbox – if there are more than one in the series, the image ‘splits’ so that the left half of the image repeats itself on the right hand side. This phenomenon disappears if I place my cursor over the ‘next’ area of the image. I was wondering if you were familiar with this bug and if there is a work-around?
Thanks!
(p.s. this is happening for me in safari on my mac and in firefox on the pc)
Sorry, let me clarify. The situation disappears when I place my cursor in the right half of the image in the set. Also, strangely, this doesn’t happen when I check out your example, so I wonder if I am doing something wrong on my blog.
Cheers!
I’ve switched to lightbox for WP and don’t have this problem now. I’m not sure what was going on.
[...] billet est juste pour tester l’affichage des images avec WP lightbox JS Slimbox, un plugin dont l’effet est tr