Remote Sensing Tools

Recently, I added a feature for image viewing when thumbnails are present in the content, which is a plug-in for WordPress called LightBox 2. By default, a user would have clicked an image preview thumbnail and the large image would view in a plain browser window. I had actually implemented a version of LightBox on the site when I initially set it up, but later took anything down that would not pass XHTML and CSS standards validation. (Note the validator links at the bottom of each page in the footer.)

An example of the LightBox viewer is evident by clicking the image to the right. →

I knew of a way to get pages with CSS3 transparency definitions to validate, but was being a bit of a ‘purist’ about the approach. The reality is, however, that due to the LightBox viewer script being a javascript based solution — I’ve conceeded that this approach is acceptable, because of the viewer being a javascript solution. The only real concern in appropriateness would be that I’m hiding the CSS file for the plugin from the validator, but, I’m already aware of what style definitions are considered invalid — which are the CSS3 transparency definitions.

Until CSS3 is released, this will continue to remain an issue in validation. For now, however, I’ll have to settle with this little javascript approach.

CSS3 Transparency Hack for Lightbox 2

The ‘fix’ is simple, but it requires going into the plug-in and hacking what it’ll output to the page. In the lightbox2.php plugin file for LightBox 2, locate the following line:

<link rel=\"stylesheet\" href=\"".$lightbox_path."lightbox.css\" type=\"text/css\" media=\"screen\" />\n

Now, replace that line with the code below (colored in purple), and replace the old plugin file in the plugin directory. Make sure you’ve made a backup of the original!:

<script type=\"text/javascript\">
//<![CDATA[
document.write('<link rel=\"stylesheet\" href=\"".$lightbox_path."lightbox.css\" type=\"text/css\" media=\"screen\" />');
//]]>
</script>\n

So there you go. Easy hack, and no more CSS validation issues with LightBox implemented into your site.

Important! — The CDATA comments must be included in order for your page to validate as XHTML. Eliminating those comments will cause an error in the validator.

Additional Notes

Note that this method will work for any site that incorporates the CSS3 transparency definitions. As long as the CSS file is linked in the above manner, you’ll get around the validation issue. But, be warned that if you take this approach — you’ll want to use it sparingly, and probably with only the CSS3 definitions in a separate file.

In the case I just demonstrated, I could have stripped the CSS3 definitions that contained transparency out of the original file, created a new file with only those definitions — and added the code above to link to the additional stylesheet, while retaining the original stylesheet. But, I opted to keep this example as simple as possible so others can understand the approach.

In this case as well, the entire viewer is Javascript based, and ‘fails’ gracefully if Javascript is disabled, reverting to the default method — thus, if a user has Javascript disabled in the browser, it really isn’t going to be a concern if that stylesheet doesn’t load into the browser as well. In most cases, however, you’ll want your CSS file(s) to be visible to the browser if Javascript is disabled, because the definitions might apply for elements across your site — which is why I stress the approach be used sparingly, and only when appropriate.