One of the tenets of XHTML is to force (strictly!) the user-agent to be responsible for the agent-specific actions on the page. In this case, since a modern browser on a modern OS can handle a “new window”, the browser should handle it. But, the same site, when rendered in a different browser (e.g. Safari on the iPhone) might not be able to handle a new window, so the markup itself shouldn’t add such an instruction. Sounds annoyingly simple enough, except when I want the non-standard action.

Enter JavaScript, which shouldn’t surprise me since I want to manipulate the DOM within browsers that can handle it. A quick google led me to an example over at Sitepoint using Javascript to add the target="_blank" attribute after the page loads:

function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
 }
}
window.onload = externalLinks;

This really seemed inelegant to me. I’m already using jQuery on the site for something else, so I re-wrote the above into a jQuery chain, which just feels better:

$("a[rel='external']").attr("target","_blank");

First, a couple of independent images.

Then, a series of three images.

I did have to modify lightbox.js a tad to give it absolute url paths for its included image files. Other than that, it’s a drop-in enhancement for image viewing.