I love Lightbox, I’ve been a fan for thousands of years. But then I started working with Mootools (not that I dislike the other frameworks, it’s just I am starting with Mootools and I am beginning to understand it, it just happen to be my first, and I have stuck with it, I do not discard trying out the others after I finish understanding Mootools), and to my sad surprise, I found that Lightbox was not compatible with it.
Digging
So I started digging around and I found Slimbox, another Lightbox clon, based on Mootools. I’ve also found Shadowbox, and Multibox, and I must admit they are really cool and advanced, they support more formats and stuff, but I discovered them after having finished with this plugin, and then I even tried a bit Shadowbox but it didn’t work properly and it is way too advanced to implement as I wanted, it’s not bad documented but I didn’t have time to finish reading it all.
As I said, I made a plugin out of Slimbox (there are already a few around, but outdated and my plugin does more things =) and I was experimenting, and found that writing plugins for WordPress is not that hard).
Enough talking, what’s the deal?
This plugin allows you to use Slimbox (Lightbox clon) in your post’s images, it automagically adds the required code, and it is backwards compliant as it works with
rel="lightbox" attribute, if you are already using Lightbox.
If you don’t like the code being added automatically, you can turn this off by editing one line in the plugin editor (wp-slimbox-reloaded.php). By the default, all images with anchors included in a given post will work as a gallery, by adding the following attribute to your anchors:
rel="lightbox[post-#]"Look for
$automatically_add_code = 'yes';and edit accordingly.
Mootools 1.2 is bound to this plugin, for those who haven’t implemented it yet, but you can modify one line in the code and tell the plugin if you already have it. The variable to look for is
$already_has_mootools = 'yes'; It also features a quicktag in the code editor (when you write a page or a post).
Installation
Just install it as any other WordPress plugin:
- Upload the whole wp-slimbox-reloaded folder to /wp-content/plugins/ directory. It is important to keep the directory hierarchy structure, otherwise it could be problems. Your WP plugin folder should look like this:
- wp-content - plugins - wp-slimbox-reloaded - css (folder) - js (folder) | wp-slimbox-reloaded.php (file)For the plugin to function correctly the name of the folder must not be changed (wp-slimbox-reloaded).
- Activate the plugin through the ‘Plugins’ menu in WordPress, and enjoy Slimbox in your WordPress blog!
Additional info on the WP codex.
Please Note:
This plugin by default automatically adds the necessary atribute to your image’s link tags, but you can turn off this feature, in the plugin editor, requires edition of only one line in the code:
$automatically_add_code = 'yes';If you turn off this feature, you must manually add a
rel="lightbox"(yes, “lightbox” for compatibility!) attribute to any link tag to activate the lightbox effect or
rel="lightbox[image-set]"for image sets.
Credits
This is my first plugin, so please be gentle =) if there’s any troubles, I’ll be happy to help you out in the comments. Actually I didn’t write very much code, I made a lot of copying and pasting, here’s more info on it:
This plugin is based on Slimbox (developed by Christophe Beyls), a 4kb visual clone of the popular Lightbox (developed by Lokesh Dhakar), written using the Mootools javascript framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.
Mostly I made arrangements of code in WP Lightbox 2 plugin by Safirul Alredha and another Slimbox plugin by Jorge Serra, to run up the latest versions of both Slimbox (1.64 at the writing of this plugin) Mootools (1.2), and of course: WordPress (2.6).
I noticed there’s also an other Slimbox – WordPress plugin but it is outdated and the automatic attachment of code it doesn’t seem to be working, though I haven’t made extensive tests. I’m talking about the one made by Peppe Argento.
If you like it please give me all your money.
Download
Get it while it’s hot!
I just implemented your WP Slimbox Reloaded plugin. While I was able to get it to work, I had to add mootools to my src folder even with the plugin reading that I didn’t not have mootools running already in WordPress. I’m not sure if this is a bug or I’m just mis-interpreting the plugin… either way it works now and I love it! Thank you so much for creating this plugin!
Alrite! I’m very happy that you liked it! It is my first plugin and, as I say, I didn’t write too much of it anyway, I just reworked some of the already coded ones!
I don’t fully understand what was your problem, did you noticed or edited the already_has_mootools variable in the plugin (code) editor (in the WordPress admin panel)?
Also note that I’m using the latest Mootools (1.2).
WP Slimbox Reloaded…
This plugin allows you to use Slimbox (Lightbox clon) in your post’s images, it automagically adds the required code, and it is backwards compliant as it works with rel=”lightbox” attribute, if you already had Lightbox installed. If you don’t like …
Hi,
I implemented your great plugin! With Firefox no problems, with IE (7) however, I get a message, (J script error I think) Object doesn’t support this property or method (line 7 char 95). If I disable the plugin, the error disapears. Do you have any suggestion?
Thank you very much, and please keep up the good work!!
Pim
Hey there Pim, I’m sorry to hear that! I don’t have IE7 to test out, but I would look for support in the Slimbox website itself, or even Mootools, as I didn’t wrote them, I just integrated them with WordPress. I think they were supposed to work with IE, is the website you left in your comment the one you are using with Slimbox? Remember that Mootools do not play nice with other Frameworks (such as jQuery or Prototype). I haven’t made extensive tests though…
please note you have a wrong code for this line in wp-slimbox-reloaded.php:
<script type="text/javascript" src="/src/mootools.js">
.....
should be:
<script type="text/javascript" src="/wp-content/plugins/wp-slimbox-reloaded/js/mootools.js">
You are refering the mootools js file to template folder..should be plugin folder right?
Yes of course! Thanks for pointing it out! Let me check what’s going on, because it still works with me like that… strange…
Lozbo, the mootools 1.2 file that you using from your plugin folder is not compatible with latest version, have you tried it out?
Coz when i point it to my current 1.2 version (mootools-1.2-core-yc.js) the slimbox script are not working. But if i use the mootools that you provided. my own mootools 1.2 compatible script will failed.
I wonder did you change the 1.2 script?
Yes, I have a test site where I am using it and it works fine, I am using the uncompressed full mootools version at all times, perhaps if you share a link I could take a look at it? Do you have any other javascripts around going on?
Hi Lozbo,
Being a non techie and relying mainly on plugin to add functionality to my various WP sites, I always have great respect for guys like you sharing freely your skills with the WP community.
I have tried installing various lightbox type plugin without having a single one working. I have also installed slimbox reloaded successfully , activated it but nothing seems to work. I can’t see it in settings etc. Is there something I should do?
Your help is most appreciated.
Thanks again.
Sylvester
Yeah, I would love to help you out! Gimme some days to get back to my place, Im currently traveling and wont be home in a few days..
Hi,
It’s seems a nice plugin, and it’s actually what I really need now, cause I plano to use mootools for other stuff…
But I can’t make it works properly…
Actually If i use the “slimbox” button in the editor I have no problem, but if I try with the image uplading it’s add no code at all…
anybody with the same issue !?
thanks
confirmed, I was able to fix the code as above but you have to change the entire line…
<script type=”text/javascript” src=”/wp-content/plugins/wp-slimbox-reloaded/js/mootools.js”>
it was still referring to the bloginfo(‘templateurl’)
Hey guys, sorry, I’m finally back, let me get on to check this issues and I’ll be posting comments regarding them.
I’m with Sylvester completely. I can’t seem to get a single lightbox plugin to work… ever…
Would love some info on how to get things working.
Thanks for this – great idea.
Thanks for the post,
Good blog
Does anyone know how I can get Google Analytics to track individual pageviews on this thing??