Technocrank

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:

1. use the jBL jQuery plugin by directly inserting code into your WordPress theme header.php.  You can then add some additional JavaScript to the header.php which will directly access the Lightbox’s variables.
2. 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

1. download the plugin from here.  Unzip and install the jquery_lightbox directory in your theme directory.
2. to your theme’s header.php file add the following:
   [sourcecode language=’javascript’]
   
   
   [/sourcecode]
3. 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.js around 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:
   [sourcecode language=’javascript’]
   [/sourcecode]

Method 2: jBL WP plugin

1. download the plugin from here.  Unzip and install in your wp-content/plugins directory.
2. activate the plugin from your WP plugin administration page.
3. go to line 449 in jquery-lightbox-balupton-edition/js/jquery.lightbox.js and modify the options as you see fit.
4. open up jquery-lightbox-balupton-edition/jquery-lightbox.php and change line 22 from:
   [sourcecode language=’javascript’]wp_enqueue_script(‘jquerylightbox’, $path.’/jquery.lightbox.packed.js’, array(‘jquery’), ‘1.3.5’);[/sourcecode]
   to:
   [sourcecode language=’javascript’]wp_enqueue_script(‘jquerylightbox’, $path.’/jquery.lightbox.js’, array(‘jquery’), ‘1.3.5’);[/sourcecode]

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.

Endnote

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.