Using Shadowbox.js with Slickr Gallery

· by Steve · Read in about 4 min · (717 Words)

Obviously I’ve been doing a lot of web work this week, getting back to how I want it. In a lot of cases that’s meant changing the software wholesale - something you really don’t want to be rushed into, but in this case I had no choice.

It’s been one of those weeks where I feel like I’m desperately doing a headlong sprint, only to run into an invisible brick wall two feet from the finish line. A number of the pieces of software I’ve tried using have been in the ‘almost, but not quite’ bracket. We used Gallery for years for example, but had never upgraded past version 1.5. Given that I’m making sure we’re not languishing on any old versions any more, I obviously picked up Gallery 2.3, spent a fair amount of time re-importing all of our galleries with the metadata attached, integrating it with WordPress via WPG2, and styling / configuring it the way I wanted, only to find that when I put it on the live site, the memory usage was completely unacceptable, even with all non-essential plugins disabled and full optimisation turned on. We’re a reasonably high-traffic site; nothing compared to some of course, but still higher than a lot of places), and it was clear fairly quickly that Gallery 2.x was going to be a dead weight - literally as soon as I enabled it the server’s available memory would plummet like a stone. I wish I had a representative performance testing set up to try these things out beforehand - sometimes I miss having the resources of a larger organisation to tap into in cases like this!

Rather annoyed at the time I’d wasted, I then tried NextGEN Gallery for a little while, but found that inadequate too. Again it was almost good enough, but unfortunately the navigation between albums was not very good, and would require some modding to make it work well. And that was even before I knew how it would perform - I suspected better than Gallery, since it’s a lot less functional, but still, it was an unknown, and I didn’t want to spend time fixing it up the way I wanted (like I did with Gallery) only to find I have to toss it out.

So finally, I settled on hosting our gallery on Flickr instead of self-hosting, and exposing them on the main site via Slickr Gallery. Slickr has a really nice navigation mode and looks very slick (it’s aptly named), and using Flickr for hosting obviously has bandwidth and performance advantages.

The one problem with this solution though was that the lightbox that Slickr uses is a bit weak. It can only handle a fixed-size window (although it will resize to the aspect ratio of the picture), which means the image is almost always too small on a decent sized screen. You can increase the size, but then it’s too large for smaller screens and you have to scroll, so it just ends up feeling unsatisfactory. So, instead I wanted to use Shadowbox.js, which resizes dynamically to the client area of the web page, which is ideal. Unfortunately Slickr doesn’t have an option to change the lightbox, and there wasn’t much information online about it. So, after some tinkering, I discovered how to do it:

  1. You should have Slickr, Lightbox-2 and Shadowbox.js installed.
  2. In wp-content/plugins/slickr-gallery/slickr/slickr.php, replace all instances of ‘lightbox’ with ‘shadowbox’
  3. In wp-content/plugins/slickr-gallery/slickr/slickr.js, replace “initLightbox();” with “Shadowbox.setup();”

That’s it.  It’s fairly simple, but it took me a bit of trial and error to get completely right even though the end result was trivial (Shadowbox’s code is a little hard to read). I originally made more changes thinking I had to do more than this, but ended up breaking things in IE, or in certain navigation cases. This simple change seems to work in all reasonable cases (IE7, FF3, Opera9, haven’t tried Safari yet). You could probably make more changes to remove the Lightbox-2 dependency entirely (disabling the plugin breaks Slickr still), but I have other things to be getting on with for now. Like uploading and tagging all the old screenshots!

Edit: here’s the result. Yes, I know the page title says ‘Page Not Found’ (something to do with the way Slickr redirects page entries), will try to figure out how to fix that later.