This is the home of the WP-Slimbox2 plugin which implements the excellent Javascript Slimbox2 written by Christophe Beyls utilizing the jQuery framework.
Check out the original Javascript page for a list of all the features, which you should be able to set from the plugin. I’ve also included the easing plugin to utilize the various enhanced easing functions if you so desire.
The most current version is the 1.0.3.2 – Released May-04-2010.
Version 1.1.3 –
This release implements Slimbox 2.0.5, properly support WordPress 3.6.
WP-Slimbox2 requires WordPress 2.8+
Support is graciously being hosted by Ryan Hellyer at PixoPoint.com I’ll make an effort to stay apprised of any questions that may arise.
A more elaborate discussion of features will be provided shortly.
Demonstration:
The demonstration uses all the standard settings except that the easing has been set to easeOutElastic.
Grouped Gallery:
If you place `rel=”lightbox-imagesetname”` into your image links (replacing imagesetname with a unique name of your choice) all the images with imagesetname will be linked, allowing navigation by hovering over the left or right side of an image (until you see next/previous) or by using the assigned key codes (the defaults are configured here – left and right arrows).
4135322621534729504438
Single Images:
By not including an imagesetname the effect limits itself to the clicked image.
Why did I write the script?:
I wrote this script after attempting to incorporate my Gallery2 gallery with WordPress. I found the WPG2 plugin very helpful (though I’m still learning its ins and outs to it), and attempted to use it’s built in lightbox and slimbox effects with no avail. Seeing that it was supposedly compatible with other plugins that added those effects I tried all of the ones I could find Lightbox2, Lightbox2, jQuery Lightbox, and Slimbox (yes, two of them were called Lightbox2).
None of them were bad, per se, though I was especially disappointed by the lack of control offered by most of them (Though it’s possible this was the fault of the JS, and not the plugin).
Another major downside with most of them was that they used javascript frameworks that I wasn’t already using. My site currently uses jQuery for K2 and the Multi-level Navigation Menu, and I’d prefer not to bulk up the site with additional frameworks. jQuery Lightbox was the exception, but it has a big ugly “ad” for the plugin in the upper right when you use it. I didn’t want that.
140 comments
136 pings
Skip to comment form
Author
I figured out how to enable comments on pages in the K2 theme, so for now if you have a question leave a comment and I’ll do what I can, thanks!
hi. Thanks for plugin
perfect.
Regards
I freaking love that jumping effect – we’ll be using this plugin for sure. Will link back here too. Thanks.
I am Going NOW to try your plugin WP SLIMBOX2. Is it combinable with nextgen Gallery? wWhich template are you using,.. and do you know an easy plugin FOR A dropdown menu?
thanks already
Looks good, I’m downloading it now. Hopefully it works as your demo does.
I am Going NOW to try your plugin WP SLIMBOX2. Is it combinable with nextgen Gallery? wWhich template are you using,.. and do you know an easy plugin FOR A dropdown menu?
thanks already
Author
ava,
For some reason your comment didn’t post initially, but I got an e-mail about it, so I added it myself (unfortunately I lost your e-mail, so I hope you’ll check back to see this.
Regarding NextGEN Gallery, I have not personally tested it, but if I understand what the plugin page is saying, it should be. Go ahead and try it out, and let me know if it works for you (or if someone else tried it out let us know).
As for the template I’m using, did you mean theme? If you mean theme, I’m using K2 (the latest nightly release – so I could have threaded comments) with a mildly custom style.
Do I know of an easy plugin for a dropdown menu? What did you think of the menu at the top of my page? It’s implemented using the Multi-level Navigation plugin by Ryan Hellyer. To get a menu on par with the one above you’ll need to get the latest beta here. I’ve become a contributor to the project myself, hopefully it will suit your needs.
The imageset function does not work in Nextgen when the autoload feature is enable. It only works when I disable it, but then again if I disable it, all the other images on my blog does not work (I have to manually add in the rel code). Is there a solution for this? Thank you. 🙂
Hi – I am overjoyed to see a lightweight jQuery solution as solid as Slimbox2 finally arriving for WP to suit dunces like me. Now, I don’t mind fiddling with PHP and JS but… I’m not sure I understand how to make the recognition going, i.e. where to copy into (I suppose, unless I misunderstood) into slimbox2_autoload.js.php the block from picasaweb.js… Help! (Pretty please…) The really awesome part is that I believe it would work also on “normal” links, provided the appropriate rel=”lightbox-blablabla” is attached. Which in the case of imagesets is doubleplus awesome.
(Sidenote: to illustrate how slow I am getting this stuff, I just now realized one has to be logged in at Pixo Point to actually see the beta! I’ve been staring at a linkless page for a few days now… not registered, of course. All’s good now.)
I had no idea you had to be logged in either. I guess attachments aren’t viewable to guests. I’ll see if I can find a fix for that.
Thanks for mentioning this issue Álvaro. I have now corrected it so that guests can see attachments too. Guests are not able to post attachments though (I don’t intend to change that).
Ugh… I meant, copying that bit to make automatic recognition of Picasa imagesets working. You can shoot me now.
Author
Hey Álvaro,
Thanks for the feedback.
As for your question regarding the picasaweb block, I honestly don’t know. Currently I haven’t actually looked at that code to see how to implement it (hence why it’s listed as a planned feature). I included the js file because it had already been written by Christophe (the creator of the Slimbox scripts), and figured if anyone really wanted it in the mean time they could figure it out.
Assuming I get the time I’m hoping I can round off the Flickr and picasaweb integration, along with basic overlay color changing ability soon.
And regarding the PixoPoint menu beta, I didn’t realize you had to be signed in myself (since I typically already am). That’s good to know.
Hello,
thx for the great plug-in 🙂
I use the version 0.9.1, when i check the autoload? option the navigation whith the arrow keys doesn´t work.
The pictures in a gallery where open as an single picture.
What can I do???
I hope you can understand my question 🙂
Greethings
Olli
Author
Oliver,
Thanks for the feedback.
If I read your question correctly you’re saying that when you use the auto-loading it’s not placing the images in a group/imageset, so you can’t navigate between them?
Can you show me an example? I visited your site, but you apparently had the autoload disabled as it was using the standard script and detecting only elements with `rel=”lightbox”` (which, not having an imagesetname variable would not be grouped together to cycle between images).
I actually copied a portion of your html and ran a test with the autoload feature turned on, and it appeared to work, so I’ll need a bit more info to figure out what exactly is wrong.
Hello,
please look at this Page..
http://www.tussen.lichtritzer.de
The autoload- option is on, an the pictures on the index-site work correkt, but on the Gallery Site
http://www.tussen.lichtritzer.de/nggallery/page-40/album-1/gallery-8/
i can´t navigate between the pictures..
when i switch the autoload option off, the gallery site works correct, but the picture on the start side doesn´t work correct.
Author
Oliver,
The plugin is working exactly the way it’s supposed to, but the situation you’re in is definitely one others may find themselves in, so it’s worth looking into a solution.
One possibility I’m going to strongly look into would be the ability to essentially run the loading script twice (if you select autoload). The first time it would take care of the elements specified as lightbox, and the second it would take care of those that aren’t.
Another option might be if I can implement the ability to specify different functionality on different pages – then you could choose one setting for the index page, and another for the gallery.
I’m going to need a chance to think about possible solutions for this problem, and how it might affect other cases (as well as what other cases there might be).
Author
Actually, I just visited your personal(?) site, using the link from the one you provided, and saw that you appeared to be using the plugin instead of the one NextGEN Gallery provides, and that there you were using the autoload feature, was this what you were referring to?
If so, you could turn off autoload because NextGEN Gallery appears to provide the proper lightbox information for you (ie ‘rel=”lightbox[familie]”‘), the plugin would then group these together for you.
The reason it’s not grouping them for you with autoload turned on is because the images are nested individually inside of div tags, and the autoload derives the image set based on the parent element. As each image on that page is nested individually from each other in it’s own set of div tags it’s not getting put in the same imageset as the others. But just turn off autoload and it should work.
Does this make sense?
Great plugin. Worgs great with NextGEN gallery.
Does this script play well with swf object? I have had some troubles with the original lightbox and swf object in Internet Explorer.
Author
It depends on what you mean by play well, but I just ran a test (only have FF and IE7 at home) and I believe it works in an acceptable manner.
The images and overlay will be on top of the swf object, though the swf image will disappear (but sound will continue to play if there was any) until you close the slimbox.
I’ll attempt to give it a shot in IE 6 tomorrow, but why not give it a shot yourself and post back with the results?
Hi and thanks for your great working plugin!
In autoload mode, the slimbox group is done only with the parent element. For my needs, I was expecting to group all photos from a post (could be an option)
I don’t know if it’s the best way to do it and don’t have much time so in slimbox2_autoload.js.php, I replaced:
return (this == el) || (this.parentNode && (this.parentNode == el.parentNode));
By the following:
var parentElt = jQuery(el).parents(“div.post”);
var parentThis = jQuery(this).parents(“div.post”);
return (this == el) || (parentElt[0] == parentThis[0]);
Author
Spi,
Thanks for the feedback. I admittedly didn’t think heavily on the autoload option, as I just used a script the Slimbox creator had written.
The ability to place all images in a post into a group definitely would be more ideal then merely the parent element. If only because it would allow people to position the images throughout the post. If people wanted separate galleries they could just make a new post, manually add the tags, or use a gallery plugin.
I’ll need to look at your code more closely when I have a bit more time, but at a glance I think I see what you’re doing.
I’ll definitely look into this and a solution for Oliver’s problem shortly after I implement the picasaweb and flickr integration.
Yes, review my code coz’ this just a quick and probably dirty hack with so little background on javascript/jquery.
By the way, in order to get options applied to groups too, I’ve also modified in the same file:
}).slimbox({}, null, function(el) {
To:
}).slimbox(‘.$options.’, null, function(el) {
Cheers!
FYI another side-effect I’ve had on autoload is with my WPG2 integration. For those using it, be aware, autoload has to be off (or patching files…) otherwise your WPG2 albums will not get slimbox.
Lol my captcha = have drunk…ok good for friday night!
Author
I was actually aware of this as I use WPG2 myself, though since it adds the lightbox tags I’d considered it a non-issue. With some of the other posts I’ve seen I’ve realized it is an issue that will need to be resolved.
You should also note that v0.9.2.3 already implemented the options fix as soon as I was aware of the problem.
Your inputs are definitely appreciated, so keep them coming.
Hi. I’ve implemented your plug-in on my wordpress blog and it’s working fine. I am however having a problem changing the easing. I’ve changed it in the admin panel under settings but when I check it on the blog, it’s always the default easing. If you have a moment some time, could you have a look and see if anything stands out to you? Much appreciated!
Author
Jason,
I was confused for a second, until I looked at the base source code and saw I’d apparently forgotten to load the options (overlay color aside) when autoload was enabled…
Whoops…
Check for v0.9.2.3 soon, and thanks for bringing this too my attention. I could’ve sworn I’d placed the options in..oh well.
Thanks Malcalevak! It’s working great now 🙂
Does this work with the [ gallery ] short code like ‘Shadowbox JS’ does?
I am looking for a pluging that will enable me to automatically use a lightbox/thickbox/slimbox effect on my site without having to type out the codes myself.
Let me know.
Author
Jessie,
I believe it should work, with autoload activated, however as it’s currently coded you would encounter a similar issue regarding cycling between images that Oliver and Spi have mentioned.
I’m working on deciding the best solution to this problem for implementation soon, but in the mean time, if you’re up for the effort you could implement Spi’s solution (replacing div.post with div.gallery might work even better for you).
Do note that slimbox is only designed for displaying images, shadowbox handles many different media types.
Check back often for updates!
It’s working like a dream, and the automatic loading with linked images makes it absolutely seamless; no “issue” whatsoever. Just a minor observation though: since the displayed image counter text can be set in the options (i.e. “Image X of Y”) I’ve used that to “localize” it in another language. Do you think it’s possible to also offer such a setting for the “Close” link?
Alternatively, and if you’re interested, I’d be happy to offer a localized version of your plugin in Spanish (and Dutch, depending on time involved) so that the plugin options are shown in that language, depending on the chosen default WP language (as set in `wp-config.php` I mean). It’s not much, but I figure it’s a more practical ‘thank-you’ for your plugin…
For localization you would need to change the “prev”, “next”, and “close” text but those are just .gif images so it wouldn’t be hard.
Ouch… I didn’t think of the text being on images… Haha! Well that takes care of that then; it’s simple to adapt. Thanks for the heads-up Nick!
Author
Álvaro,
Sorry for the late reply, but I’ll gladly take you up on the translation offer. Register on our support forums, http://pixopoint.com/forum/index.php?board=6.0
And we’ll take things from there.
I just started using your new jQuery Slimbox plug-in and it looks great so far. I like having all the options in the admin section so I don’t have to edit the JavaScript by hand.
I have one suggestion:
Since slimbox2_autoload.js.php is generated with php the browser isn’t caching the file and it gets downloaded with every pageload. The JavaScript shouldn’t change unless the settings are changed in the admin section though. Have you considered adding something like:
Cache-Control: max-age=86400, must-revalidate
to the Header so the file will be cached for 24 hours (or more)?
Author
Nick,
Thanks for the feedback, I’m glad you’re liking the the plugin.
Shortly before you posted your suggestion I actually did run a test involving not only caching, but also gzipping.
I don’t fully understand how it all works, but it will be in the next release for the autoload of the .js.
In addition to picasaweb and flickr integration I will also be testing this functionality out. I’d appreciate any feedback you can give on it.
Hopefully a new release will be out later tonight (tonight=EST).
Author
When I get a chance I’ll finish responding to the current comments, but to make things easier to track, as well as help others search in the future, please use the support forums for questions: http://pixopoint.com/forum/index.php?board=6.0
If you just want to say thanks, a comment is still fine.
Keep checking back for updates, I’ve got a lot planned.
it’s work great
thank you! :”>
Hi,
in slimbox2_autoload.js.php I modified the autoload function so that it puts every image of a single post into one image set:
==================
if (get_option(‘wp_slimbox_autoload’) == ‘on’)
$autoLoad = ‘$(“a[href]”).filter(function() {
return /\.(jpg|png|gif)$/i.test(this.href);
}).slimbox(‘.$options.’, null, function(el) {
// (Zellner, 2009-01-17)
// make all images of the same post showing up in the same image set
//
if (this == el)
return true;
for (var node = this.parentNode; node; node = node.parentNode) {
for (var el_node = el.parentNode; el_node; el_node = el_node.parentNode) {
if (node == el_node)
return true;
el_cls = el_node.getAttribute(“class”);
if (el_cls && el_cls.toLowerCase() == “entry-content”)
break;
}
cls = node.getAttribute(“class”);
if (cls && cls.toLowerCase() == “entry-content”)
break;
}
return false;
});’;
else
==================
maybe you can make this an option?
best regards,
Johannes.
uups, I just saw a much simpler solution @ http://transientmonkey.com/wp-slimbox2/comment-page-1#comment-148
sorry for bandwidth.
Anyway, having this as an option would be fine.
Now having all the images of one post collected to a image set, I’d like to make them unique, so that if an image link occurs repeatedly across the post, the image appears only once in the image set displayed by slimbox.
Any ideas how to do that?
Where am I supposed to manually add ‘rel=”lightbox”‘ for individual images or ‘rel=”lightbox-imagesetname”‘ for groups
Can someone tell this nooby fool what I’m missing here? I have trawled the forums, WP but nobody clearly says exactly where you are supposed add this.
Thanks
PS site is not up yet, hence no website link. I have the auto working fine but I think a manual setting will be better for my needs, as in one post I am sure to want to have both individual as well as several groups of images.
Author
Please post support questions on the support forums, linked at the top of this page.
Wow, great stuff!
Any easy way to use the plugin with non-image content? an Iframe would be lovely.
Thanks,
Author
Please post such questions on the forums, and also read the information posted on the Slimbox2 javascript author’s site, linked at the top.
Amazing plugin! I really like the autoload option, so the only thing I had to do was enabling the plugin and play with the settings.
Thanks so much for sharing!
Any idea what handle I can use to make slimbox process new data which was fetched using AJAX?
Specifically, I want to know what callback I can use with the InfiniteScroll WordPress plugin so new posts fetched will also make use of slimbox.
Thanks
Author
Please ask such questions in the support forums.
OK. Posted in the forum
This is great work! Thanks so much for encapsulating Slimbox 2 into this easy to use plugin, it has worked flawlessly for me.
Malcalevak, I’m having a great time with your plug-in. It’s just what I was looking for. My only question is this: In my posts, I often place several thumbnails and one or two full sized photos. The thumbnails work fine when I insert them using the NextGen Gallery. They come in with the correct tag to function, i.e. <a rel=”lightbox[]. However, when I place a full sized photo they are tagged as <img src=”. . .”. Is there a way to make the full sized images default to the lightbox tag? I hope this makes sense to you!
Thanks
Jason
Author
Please post support questions in the support forums. Also note you may wish to ask NextGen support the same question.
Very cool! I love seeing a host of bloated plugins cut-down-to-size.. great job!
Hi,
I’ve got the slimbox2 working alongside nextgen gallery and everything works perfectly, except I don’t know how to add titles?
The pictures all have titles (in wordpress under media -> edit media) but when i click on a picture on my site all i get is Image X of X and a gap where the title is meant to go.
I’ve read somewhere to ‘use the optional title atribtute’ title=” my caption” but adding this in doesn’t make any difference? Is there something incredibly easy i’m missing?
Author
Please post support questions in the support forums.
Nice plugin. I was using wp-lytebox but this one look nice and still maintained. I use it with cleaner galery.
I began the french translation, are you interrested in it ? If yes, feel free to send me an email so I can send you the translation.
Author
I most certainly am interested in your French translation. I’ll shoot you an e-mail right away.
[…] WP SlimBox2 plugin for WordPress is a jQuery version of the WordPress Slimbox plugin. The SlimBox plugin creates […]
[…] WP-Slimbox2 […]
[…] WP-Slimbox2 […]
[…] WP-Slimbox2 […]
[…] WP-Slimbox2 […]
[…] WP-Slimbox2 […]
[…] WP-Slimbox2 […]
[…] WP-Slimbox2 […]
[…] WP-Slimbox2 […]
[…] of photos, Flickr Gallery is our favorite plugin for incorporating Flickr photos onto a blog and Slimbox is the best plugin for displaying photos with a lightbox […]
[…] WP-Slimbox2 […]
[…] de finalizar la traducción del fabuloso plugin WP-Slimbox2 de Greg Yingling (malcalevak) al español. He aquí una pequeña demostración de qué es y cómo funciona – para […]
[…] 15. WP-Slimbox2 Plugin […]
[…] 15. WP-Slimbox2 Plugin […]
Plugin WP-Slimbox2 en español…
Lo ha traducido nv1962 y se trata del plugin para WordPress WP-Slimbox2, creado por Greg Yingling, que sirve para crear galerías de imágenes con efectos. La novedad, según explica nv1962 es que trabaja bajo Slimbox basado en JQuery, al contrario qu…
[…] 15. WP-Slimbox2 Plugin […]
[…] Christophe Beyls’ Slimbox 2. To make things even easier, Greg Yingling has created a plugin, WP-Slimbox2, that implements Slimbox 2 within a WordPress blog (such as this news page!). Try it out by click […]
[…] 15. WP-Slimbox2 Plugin […]
[…] por unidad o una galería, que la crea automáticamente este plug con la ayuda de WP-Slimbox2(autor) que es otro plugin que permite crear unas galerías sencillas, bonitas y que simplemente tienes […]
[…] WP-Slimbox2 (0.9.6): Öffnet Fotos auf Wunsch innerhalb der Seite (wie ein Layer), es wird keine neue Seite geöffnet. Gleiches Prinzip wie Lightbox Gallery. […]
[…] 15. WP-Slimbox2 Plugin […]
[…] Reloaded (or WP-Slimbox2 or Lightbox […]