e-magine(pretty && functional)

While implementing yet another a WordPress site, I found myself in the situation where I wanted to display any and all images in lightboxes, but with a minimum of interaction from the editor’s part.

All current plugins that integrate Slimbox (that I know of – this one, for example) actually require the editor to add the rel="lightbox" attribute. But since the editors of this site have no HTML knowledge whatsoever and will be editing in “visual” mode, this hinders deployment.

So I came up with a modification to the actual javascript of Slimbox, to make it identify all links to images and lightboxify them

Here’s the actual code modification (starting at line 22 – on Slimbox version 1.41):

$each(document.links, function(el) {
if (el.href && el.href.test(/.(jpg|jpeg|png|gif|bmp)$/i)) {
el.onclick = this.click.pass(el, this);
el.rel = 'lightbox';
this.anchors.push(el);
}
}, this);

$each(document.links, function(el){
if (el.rel && el.rel.test(/^lightbox/i)){
el.onclick = this.click.pass(el, this);
this.anchors.push(el);
}
}, this);

This replaces the detection of links that have “lightbox” in the rel attribute with a detection of all links that lead to images.

Although it suits my intended purpose, there are several drawbacks to this method that I can think of:

• if there already is a rel attribute, it overwrites it
• it won’t take advantage of the “gallery” feature

As mentioned in the title, this is a “quick & dirty” fix, but might help some.

If I get around, I’ll be writing a WordPress plugin with options to lightboxify all images, make a gallery of all images in a post / page (by filtering the_content() and adding a rel="lightbox[$post->ID]" to image links). Maybe even make a TinyMCE plugin that would add a button to lightboxify a certain image – right from the visual editor.