Lightbox is a very cool plugin that opens images in the same page you’re browsing but you have to add a rel="lightbox[class]" to every image. By hand. There is a plugin called iMP Auto Slimbox that builds upon lightbox but doesn’t work with sets so you lose half the fun of using it. There is also an upgrade to the IImage Browser Plugin that adds Lightbox functionality but you still have to remember using it for each image you add and won’t work with images you have already inserted. And finally there is a hack for lightbox from bloggerskills that will automatically make all your inserted thumbnails work with Lightbox although without set support.

What I have done is to take the hack from BloggerSkills and make it work in lightbox 2.01 (I couldn’t make their hack work with wp2 as it was posted) and now you will have the following benefits:

• all the thumbnails you inserted through the editor will have a class="imagelink" that WP automatically added to them and they will all belong to a set
• all the new thumbnails you insert through the editor from now on will have a class="imagelink" (WordPress 2.2 doesn’t adds them anymore but they may be useful in the future)
• all the new thumbnails will also get a rel="lightbox[pPOSTID]" where POSTID is the id of the current post you’re editing so your inserted images will by default belong to a unique set

Drawback: when people browse through your old posts where you have two or more posts in the same page with images and they click on one image they will get a set for all the images that are in the same page. You can overcome this problem by further modifying the code but the current solution is good enough for me.

1. Open wp-content/plugins/lightbox/lightbox.js.
Go around line 181 change:

if (anchor.getAttribute(‘href’) && (relAttribute.toLowerCase().match(‘lightbox’))){
    anchor.onclick = function () {myLightbox.start(this); return false;}
}

into

if (anchor.getAttribute(‘href’) && (relAttribute.toLowerCase().match(‘lightbox’) || anchor.className.match(‘imagelink’))){
    anchor.onclick = function () {myLightbox.start(this); return false;}
}

 

Now go to around line 338 and change this:

var anchor = anchors[i];
if (anchor.getAttribute(‘href’) && (anchor.getAttribute(‘rel’) == imageLink.getAttribute(‘rel’))){
    imageArray.push(new Array(anchor.getAttribute(‘href’), anchor.getAttribute(‘title’)));
}

into this:

var anchor = anchors[i];
if (anchor.getAttribute(‘href’) && ((anchor.getAttribute(‘rel’) && anchor.getAttribute(‘rel’) == imageLink.getAttribute(‘rel’)) || ((anchor.className.match(‘imagelink’) && !anchor.getAttribute(‘rel’))))) {
    imageArray.push(new Array(anchor.getAttribute(‘href’), anchor.getAttribute(‘title’)));
}

 

Open wp-admin/upload.js
Go to line 239 and change:

if ( ‘none’ != link )
    h += “<a href=’” + ( ‘file’ == link ? ( this.currentImage.srcBase + this.currentImage.src ) : ( this.currentImage.page + “‘ rel=’attachment wp-att-” + this.currentImage.ID ) ) + “‘ title=’” + this.currentImage.title + “‘>”;

into this:

if ( ‘none’ != link )
    h += “<a rel=’lightbox[p"+parent.document.location.href.split('&post=')[1]+”]’ class=’imagelink’ href=’” + ( ‘file’ == link ? ( this.currentImage.srcBase + this.currentImage.src ) : ( this.currentImage.page + “‘ rel=’attachment wp-att-” + this.currentImage.ID ) ) + “‘ title=’” + this.currentImage.title + “‘>”;

Thanks to BloggerSkills for the idea.