↑ Return to Web Design

WP-Slimbox2

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.

Azazel/Phillip Promo Shot
TAP Spring 04 103.jpg
TAP Spring 04 112.jpg

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.

WP-Slimbox2 User Guide

Sorry, the User Guide isn’t ready just yet, but I promise it’ll be up soon… [important]Until it is, use the support forums for questions![/important]

View page »

139 comments

136 pings

Skip to comment form

  1. Malcalevak

    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!

  2. baron

    hi. Thanks for plugin

    perfect.

    Regards

  3. UFO clips

    I freaking love that jumping effect – we’ll be using this plugin for sure. Will link back here too. Thanks.

  4. ava

    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

  5. Ryan

    Looks good, I’m downloading it now. Hopefully it works as your demo does.

  6. ava

    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

    1. Malcalevak

      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.

      1. Dayna

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

  7. Álvaro Degives-Más

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

    1. Ryan

      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.

    2. Ryan

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

  8. Álvaro Degives-Más

    Ugh… I meant, copying that bit to make automatic recognition of Picasa imagesets working. You can shoot me now.

    1. Malcalevak

      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.

  9. Oliver

    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

    1. Malcalevak

      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.

      1. Oliver

        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.

        1. Malcalevak

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

    2. Malcalevak

      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?

      1. James

        Great plugin. Worgs great with NextGEN gallery.

  10. Alan Hughes

    Does this script play well with swf object? I have had some troubles with the original lightbox and swf object in Internet Explorer.

    1. Malcalevak

      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?

  11. Spi

    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]);

    1. Malcalevak

      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.

      1. Spi

        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!

        1. Spi

          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!

          1. Malcalevak

            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.

  12. Jason

    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!

    1. Malcalevak

      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.

      1. Jason

        Thanks Malcalevak! It’s working great now 🙂

  13. Jessie Angel

    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.

    1. Malcalevak

      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!

  14. Álvaro Degives-Más

    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…

    1. Nick Marshall

      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.

      1. Álvaro Degives-Más

        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!

        1. Malcalevak

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

  15. Nick Marshall

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

    1. Malcalevak

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

  16. Malcalevak

    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.

  17. thienng

    it’s work great
    thank you! :”>

  18. Dr. Johannes Zellner

    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.

    1. Dr. Johannes Zellner

      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.

  19. Dr. Johannes Zellner

    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?

  20. Otto

    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.

    1. Malcalevak

      Please post support questions on the support forums, linked at the top of this page.

  21. MJ

    Wow, great stuff!

    Any easy way to use the plugin with non-image content? an Iframe would be lovely.

    Thanks,

    1. Malcalevak

      Please post such questions on the forums, and also read the information posted on the Slimbox2 javascript author’s site, linked at the top.

  22. Arjen

    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!

  23. dirkhaim

    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

    1. Malcalevak

      Please ask such questions in the support forums.

      1. dirkhaim

        OK. Posted in the forum

  24. Steve

    This is great work! Thanks so much for encapsulating Slimbox 2 into this easy to use plugin, it has worked flawlessly for me.

  25. Jason

    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

    1. Malcalevak

      Please post support questions in the support forums. Also note you may wish to ask NextGen support the same question.

  26. AskApache

    Very cool! I love seeing a host of bloated plugins cut-down-to-size.. great job!

  27. Tom

    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?

    1. Malcalevak

      Please post support questions in the support forums.

  28. Jandry

    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.

    1. Malcalevak

      I most certainly am interested in your French translation. I’ll shoot you an e-mail right away.

1 2 3 5

  1. WP SlimBox2 plugin

    […] WP SlimBox2 plugin for WordPress is a jQuery version of the WordPress Slimbox plugin. The SlimBox plugin creates […]

  2. WordPress Plugin Releases for 01/06 | Weblog Tools Collection

    […] WP-Slimbox2 […]

  3. WordPress Plugin Releases for 01/06 | 12 masalay

    […] WP-Slimbox2 […]

  4. WordPress Plugin Releases for 01/06 | Wordpress Blog NL

    […] WP-Slimbox2 […]

  5. WordPress Plugin Releases for 01/06 | BlogBroker24-7

    […] WP-Slimbox2 […]

  6. WordPress Plugin Releases for 01/06 | Castup

    […] WP-Slimbox2 […]

  7. WordPress Plugin Releases for 01/06

    […] WP-Slimbox2 […]

  8. The Best WordPress Plugins For Travel Blogs | Spot Cool Stuff: Websites

    […] 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 […]

  9. » Blog Archive » Super Pack Plugins Para Wordpress [2009]

    […] WP-Slimbox2 […]

  10. Probando WP-Slimbox2 en español | nv1962

    […] 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 […]

  11. The Power of WordPress and jQuery: 30+ Useful Plugins & Tutorials

    […] 15. WP-Slimbox2 Plugin […]

  12. TodoWordPress

    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…

  13. The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials | Web2.0

    […] 15. WP-Slimbox2 Plugin […]

  14. Steve’s Buffyverse Timeline » Sending Out Some Web Programming Love

    […] 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. Free WordPress and jQuery: 25+ Useful Plugins & Tutorials | guidesigner.com

    […] 15. WP-Slimbox2 Plugin […]

  16. Los Cambios nº1 | Mauricio Caroca

    […] 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 […]

  17. Website-Relaunch #03: Die besten Wordpress-Plugins – Update. : JUICEDblog

    […] 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. […]

  18. Free WordPress and jQuery: 25+ Useful Plugins & Tutorials | designersmantra.com

    […] 15. WP-Slimbox2 Plugin […]

  19. Basic WordPress plugins - op111.net

    […] Reloaded (or WP-Slimbox2 or Lightbox […]

Leave a Reply to Roceller Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

css.php