I love hacks that benefit WPMU so I’m always on the hunt to find ones that will be helpful to our readers. If you’ve ever experienced the frustration of getting a lightbox effect for images to be site-wide on your installation, here is your answer. This is a slightly hacked version of the Slimbox plugin by Brajesh Singh of Thinking In WordPress. Grab the zip file of the plugin here. Unzip and upload the files slimbox.php and the folder “slimbox” to wp-content/mu-plugins directory. That’s all you have to do. It will automatically be activated site-wide.

The original plugin is located here: http://wordpress.org/extend/plugins/slimbox/ Why do we like Slimbox? It’s standards-friendly. It allows you to quickly navigate through a gallery without bugging out. It has a lot of customizable options, including changing the duration of any of its effects. You can style every visual aspect of the plugin using CSS. However, the greatest feature is its powerful API, which easily interfaces with any links pointing to Flickr or Picasa or any JavaScript image gallery. The ability to build this effect into your installation while allowing your users to display images from 3rd party image hosting providers will save you all kinds of disk space. This is especially true if you’re hosting a social network where members will want to share their photos.

Quick Example with Flickr and WPMU:

If you install a flickr widget, such as this one, and make it available to your blog users, they can easily enter their Flickr RSS and have their stream displaying in the sidebar of their blog. Ordinarily, these photos open up on a new page at Flickr, but you want them to open on your site using slimbox. You can achieve this by using a linkMapper function with jQuery. Because Flickr has a uniform link suffix, Twitter Tools & Apps, depending on the size of the image, i.e. /sq, /t, /s, /m, /l, it is simple to map the thumbnails to the larger images and tell them to make a slimbox gallery of them. Here’s the JavaScript you need to get the Slimbox working together with Flickr. It works perfectly with WPMU:

<script type="text/javascript">
jQuery(function($) {
        $("a[href^='http://www.flickr.com/photos/'] > img:first-child[src]").parent().slimbox({}, function(el) {
                return [el.firstChild.src.replace(/_[mts]\.(\w+)$/, ".$1"),
                        (el.title || el.firstChild.alt) + '<br /><a href="' + el.href + '">Flickr page</a>'];
        });
});
</script>

Steps in Review:

1. Install the Slimbox Plugin that has been hacked for WPMU.

2. Install a Flickr Widget for WPMU.

3. Add the JavaScript shown above to the header.php file of your theme.

If you pull this widget into BuddyPress, I imagine that you can set up a decent gallery that allows users to drop in their Flickr RSS and have their photos shown on their profile with Slimbox, instead of opening at Flickr. Maybe we’ll do a tutorial on that if there’s any interest. :) There are BP gallery plugins coming onto the scene, but if you don’t want the hassle of hosting your member’s images, try using the Slimbox API to utilize a 3rd party image hosting service.