Mar 2, 2009
jQuery Lightbox (Balupton Edition) 1.3.5
jQuery Lightbox (Balupton Edition) WP plugin 0.5
There are a million lightbox implementations out there and almost as many corresponding WordPress plugins. My favourite is the jQuery Lightbox (Balupton Edition) which, in my opinion, is one of the best looking ones out there. A lot of them go for flashiness but end up looking tawdry or, in their attempt to be pretty end up suffering usability issues. The jLB is simple and attractive. I use it in conjunction with the Add Lightbox plugin.
The WordPress plugin implementation of the jBL does suffer from one relatively minor deficiency in that if you want to pass it option arguments it doesn’t accept all of them. And even to do that you have to go into the plugin code and make direct modifications (as opposed to the plugin giving you an administrative panel with which to enter your settings). There are two options then:
- use the jBL jQuery plugin by directly inserting code into your WordPress theme
header.phpwhich will directly access the Lightbox’s variables.
- use the jBL WordPress plugin and hack in a few modifications which essentially render the plugin an additional maintenance chore. It’s not all that bad if you don’t intend to ever update your plugins. However, given the state of browser development and the unending jQuery development chasing it the chances of this happening are somewhat slim. Unless you’re really going for a short term solution.
My requirements were to change some of the informational text and linkback of the code. Here’s 2 ways to do that:
Method 1: jBL jQuery plugin
- download the plugin from here. Unzip and install the
jquery_lightboxdirectory in your theme directory.
- to your theme’s
header.phpfile add the following:
- The options available to you can be found in
jquery_lightbox/readme.txt(as well as all how to pass options as URL variables, which I never actually got to work satisfactorily). However, if you look at
jquery/lightbox/js/jquery_lighbox.jsaround line 449, you’ll get a better feel for what’s lurking underneath. Directly below your code in Step 2, you can add your options like this:
Method 2: jBL WP plugin
- download the plugin from here. Unzip and install in your
- activate the plugin from your WP plugin administration page.
- go to line 449 in
jquery-lightbox-balupton-edition/js/jquery.lightbox.jsand modify the options as you see fit.
- open up
jquery-lightbox-balupton-edition/jquery-lightbox.phpand change line 22 from:
wp_enqueue_script('jquerylightbox', $path.'/jquery.lightbox.packed.js', array('jquery'), '1.3.5');
wp_enqueue_script('jquerylightbox', $path.'/jquery.lightbox.js', array('jquery'), '1.3.5');
I toyed around with compressing the
jquery.lightbox.js file in Method 2 using several methods but none of them actually produced code that ultimately worked. The jQuery docs prescribe using the YUI Compressor but that failed. Also, simply copying the modified file and using Dean Edward’s Name Packer (which is what the Balupton packed code is from, and also is what jQuery warns against *not* using) didn’t work. What did work was taking the compressed file, feeding it into the decoder on Dean Edward’s script, copying the uncompressed code into an editor, scanning through the code (with no linefeeds available), editing the variables, copying it back to the compressor and recompressing it. While it’s a testament to my determination to get the damn thing to work, it’s a ridiculous amount of effort for what is, to me, anyway, very little payoff. Of course, I’m not a Slashdot sysadmin, so I’m not particularly motivated.
It would be nice to use the WP plugin and be able to use the code from 1.3 above to access the variables. Actually, it would really be nice to have an administrative setting page and bypass messing with unmaintainable code.
The jQuery issues page has some postings attempting to glean some support about similar questions but answers are amusingly scarce.
For this plugin to work, as with most other Lightboxes your images need to be linked to other images. jBL will add a caption to the image if you add a title=”this is my photo” attribute to your anchor tag. Also, as with other Lightboxes a rel=”lightbox” type attribute is needed. The Add Lightbox WP plugin is handy for this: it automatically adds the rel attribute to any images on the page and intelligently separates out individual posts.