bioneural.net » javascript

iBox now at version 2

Bruce — Wed, 12 Mar 2008 19:02:21 +0000

A customised version of iBox is used extensively on bioneural.net (e.g. the Flickr photocast here) and iBegin have just released version 2. This free JavaScript lets you display automatically scaling images, external documents, or embedded containers in an overlay dialog without needing to reload the page. iBox has gained some weight since v1.2.1 (2006) but remains compact compared to other Lightbox-alike solutions and just as simple to use, now boasting wider browser support and new plug-in capabilities (e.g. for embedding YouTube videos). In most cases it degrades gracefully when JavaScript is disabled (it won't display hidden inline containers; JavaScript is required to play YouTube videos).

How to safely inject CSS3 using jQuery

Bruce — Thu, 14 Feb 2008 14:14:56 +0000

From bioneural.net:

So you fancy using some of that über-cool draft CSS3 that WebKit browsers can handle, such as text shadows, drop shadows, opacity and rounded corners? But at the same time you want to present only valid CSS to the W3C CSS Validator? It's a dilemma, but it is possible to have your cake and eat it too—albeit by hiding CSS in JavaScript and thus cheating the Validator. However, there is even a precedent for doing so.

During the course of researching my review of the various ways to make rounded corners, drop shadows, and gradients I learned more about CSS3 and the jQuery JavaScript library. They just needed introducing to one another.

Text shadows, drop shadows, and round corners in Safari 3

A historical precedent

The concept of tricking the Validator to pass CSS that is incorrectly implemented or proprietary and not part of the W3C spec is not new. Many web developers have found it necessary to employ various hacks in their CSS to accommodate differences in the way browsers interpret the rules. Others have used proprietary code to overcome limitations or quirks in the way some browsers handle certain content. For example, the following in your document head could be used to fix IE6's lack of handling for transparent PNGs and mis-handling of the box model, floats, overflow, italics, etc.:

It's a hack: there's no other term for it. In the above example we're using proprietary conditional comments and filters to fix proprietary cock-ups. Seems fair, doesn't it?

So, if we can hack our way to supporting inferior or out-dated browsers, why should we not also employ hacks to support leading-edge browsers like Safari 3 that are already capable of rendering much of that draft CSS3 goodness?

Using jQuery's CSS injector

There are probably multiple JavaScripts that let you load CSS via the DOM, but since I'm using jQuery anyway that's how I've chosen to do it. If you don't have jQuery installed go get it and load it in your document head e.g.:

Below this we create a $(document).ready() function so that the contents load via the DOM and hopefully before the page content is displayed. Inside this function our "content" consists of a series of CSS selectors (inside the first bracket) paired with the CSS properties we wish to inject (name and value, comma-separated) joined via .css. Example:

If you had a div with the class "container koru", for example, Safari 3 will blend the above box-shadow and border-radius styling (as inline CSS3) with any additional CSS2.1 styling for .container or .koru present in your stylesheet. You can see what's going on using that browser's Web Inspector:

Note: A -webkit- or -moz- prefix on CSS properties is used respectively by the Safari and Mozilla/Firefox browsers to indicate tentative support for as yet non-ratified web standards. Thus -webkit-border-radius: 10px; and -moz-border-radius: 10px; are both potentially differing implementations of "border-radius".

OK, so the "how" is easy. Now the "Should you?"

The positives

Effects are rendered without requiring images.

Effects are rendered without requiring add-on JavaScript effects libraries.

Effects are rendered without increasing page size or load time.

Effects are rendered that may be impossible with some JavaScript or image-based techniques (e.g. anti-aliasing, liquid layout support).

Effects can be targeted at specific web browser engines.

No changes to semantic mark-up are required.

Your stylesheets remain W3C-valid (if they were before!).

Browsers simply ignore CSS properties they don't understand, so degradation is graceful.

If JavaScript is disabled browsers will still load your stylesheets, so degradation is graceful.

It is compatible with template-based websites in not requiring page-specific effects scripts to be inserted into mark-up.

When the -webkit- or -moz- prefix gives way to the real deal of W3C-ratified CSS3 we can simply remove the script and move the content to our stylesheet without having to re-design effects elements or edit any mark-up.

If you don't start using CSS3 now you might have retired before it becomes W3C-ratified.

The negatives

Turning off your stylesheet does not disable styling loaded via the DOM.

Effects can be targeted at specific web browser engines (like browser-targeting, a double-edged sword that undermines the uniformity of the "web experience").

It could be construed as cheating. It is.

What are your views, if you have any, on the merits or otherwise of this technique?

Corners, gradients and shadows with jQuery

Bruce — Wed, 13 Feb 2008 15:36:40 +0000

From bioneural.net:

Previously we looked at moving to jQuery, and then at the best way to do corners and gradients using a variety of techniques (Part 1). In this follow-on article (Part 2) I want to share how jQuery can be extended for similar cornering, gradient, and drop shadow visual effects. Although my JavaScript ability is not much beyond "cut and paste" the idea here is to share how easy it is to create these effects for other folk possessed by similar (in)ability.

Situation recap

In Part 1 we explored various ways to make rounded corners, comprising one or more of JavaScript, CSS, Flash, and SVG. Ditto for drop shadows. Implementing a gradient was restricted to the use of background (or inline) images, or to SVG. There are a few more tricks we might try for gradients:

We could load a transparent PNG as a CSS background and vary the fill colour on the container to allow for a multitude of colour-graduated boxes without further image editing (see this ALA article);
Unfortunately the CSS 3 draft as of this writing doesn't include background gradients, but you might be able to fake it using border-color;
We could use JavaScript effects libraries.

It turns out we can use JavaScript to create our corners and drop shadows too. There's also a plugin for using curvyCorners with jQuery that more than halves the standalone curvyCorners code size.

Extending jQuery

While there are some basic effects (hide, toggle, slide, etc.) and manipulation options in the jQuery core API, jQuery UI is a bolt-on library of interactive controls that deal with mouse interaction (e.g. resizing, dragging) and other "user interface" extensions. As of this writing the jQuery documentation is incomplete and the developers in the process of transitioning visual effects formerly included in jQuery UI to a new sister library called jQuery Enchant. The controls (also referred to as core interaction plugins, UI widgets, or components) are themselves are almost invariably dependent on other jQuery extensions—needing at least the Dimensions plugin.

So jQuery needs to get its act together in respect of naming conventions, but perhaps this is more indicative of active development rather than lack of direction? I guess jQuery UI/ Enchant are to jQuery as script.aculo.us is to Prototype. In a nutshell we're saying that with some jQuery code that in turn requires a bit more extra code in order to work, in addition to the code that is "jQuery" itself—we can create visual elements like drop shadows! jQuery is thus readily extendible; to use these extra bits of code you just need to load the relevant add-on script in your document head, after having loaded jQuery itself. A picture may help:

Test cases

I've used the same basic test box from Part 1, so our core document structure looks like this:




jQuery test cases











	Lorem ipsum
	Lorem ipsum dolor...

With all the necessary libraries loaded we can start adding effects to our div by calling them within $(document).ready() (in place of ... above).

Download the test files here (.zip archive, 27KB).

Here is the live link.

Case 1: Round corners

If you wanted to use fancy images to produce round corners yet avoid extra mark-up, you could use this technique. Alternatively use no images at all via the jQuery corner plugin, available here. The plugin supports a variety of corner types and borders as you can see in the demos. The following call will add cornering with a radius of 20px to a div with the class .cornered:

$('div.cornered').corner("20px");

This will have the following effect on our test box:

Case 2: Gradients

The Element gradient plugin, available here, will fill an element (e.g. div) with a linear gradient of specified direction (horizontal or vertical only) and opacity. It requires the Dimensions plugin. The following call will add a vertical gradient from black to white with 40% opacity to a div with the class .gradient:

$('div.gradient').gradient({ topcolor: '#000000', bottomcolor: '#ffffff', horizontal: false, opacity: 40 });

This will have the following effect on our test box:

Note that you can't shorten the hex-code (it must be #ffffff not #fff for white, for example).

Tip: If you leave the gradient as black to white with some opacity you can create colour gradients much more easily but changing only the background colour of the container. This is a jQuery version of the ALA super-easy blendy backgrounds trick.

Case 3: Borders

Back to the jQuery corner plugin; it can also do borders using nested elements i.e. one rounded box inside another. So our mark-up could be edited thus:



	Lorem ipsum
	Lorem ipsum dolor...

But we don't want to edit our mark-up do we? We don't have to.

Tip: We can make use of .wrap() to inject the extra container into our mark-up on-the-fly with JavaScript.

The following calls will add a wrapper div with the class .xtra to our box, then proceed to round our inner box (.border) with a radius of 15px, before padding .xtra with 5px of "border" (whitened with CSS on .xtra) and rounding with a 20px radius:

$('div.border').wrap("");
$('div.border').corner("15px").parent().css('padding', '5px').corner("20px");

This will have the following effect on our test box:

Case 4: Drop shadows

In researching this article I came across three ways to create drop shadows using jQuery:

Shadow is an extension that uses tables with multiple rows subject to CSS styling including varying opacity to create a drop shadow illusion;
A method that uses images and "onion skin" CSS added via .wrap() to add a drop shadow;
UI/Shadow.

UI/Shadow, available to download here, is being folded into the yet-to-be-released jQuery Enchant library. It wraps your element in nested divs and uses opacity to create the shadow effect. It also requires the Dimensions plugin. The following call will add a drop shadow to a div with the class . dropshadow:

$('div.dropshadow').shadow({ color: "#444", offset: 5, opacity: 0.2 });

This will have the following effect on our test box:

Combining effects and liquid layouts

As you can see while the effects in cases 1–4 work well enough on their own, they sadly don't play together very well (see Case 5). Whether this is a limitation in one or more of the plugins, or in my scripting know-how I'm not sure.

It is possible to create a rounded box with a border that adjusts to change in text size or window width, but using an image to render the gradient (see Case 6). Because the Dimensions plugin employs absolute positioning, effects that use it (gradients, drop shadows) will "detach" from their elements if you try resizing your browser window or changing text size (see the effect on cases 2, 4, and 5).

The final score

To be fair I guess we should use the same scoring system to evaluate jQuery against the other methods we explored in Part 1.

Scoresheet:

Photo background: Supported.

Gradient background: Supported (as image or scripted).

Four rounded corners: Yes.

Border: Yes (without extra mark-up).

Drop shadow: Yes (without images).

Minimal mark-up: Extra containers in mark-up can be avoided with .wrap().

Static mark-up: Mark-up edited to insert box-specific script.

W3C validity: Yes.

Anti-aliasing: No.

Small footprint: 29KB for jQuery plus 19KB for add-on libraries (background images additional). Of course if you're already using jQuery you need only consider the additional size of any add-ons (e.g. shadows for 6KB).

Graceful degradation: Renders as per the master if JavaScript disabled but liquid layouts may cause problems if width is set on containers added with .wrap().

Liquidity: Yes, with the proviso that you avoid Dimensions-reliant effects.

Score: 9/12 (probably less, because of problems combining effects)

Not enough to de-throne CSS 3 which scored 11/12, or 12/12 if it were a standard. But CSS 3 isn't here yet and won't be widely supported by all major browsers for some time. jQuery is here, however, and JavaScript is widely supported.

Upon reflection there's something to be said for the elegant simplicity and refined geometry of straight lines and sharp corners. This is how the Dwarves would choose to build websites, leaving curves and soft edges to the Elves. So the ultimate question, really, is do you relate more to Gimli or Legolas? Your answer to that, Middle-earthlings, will decide the direction you should take ;-)

The best way to do corners and gradients

Bruce — Wed, 06 Feb 2008 14:36:17 +0000

From bioneural.net:

Rounded corners. Yes, they may be a "Web 2.0" fashion fad, but it has been clearly documented that they're a lot easier to make than square ones. As part of my overhaul of bioneural.net I've been optimizing much of the code "under the hood", meaning a lot of the changes aren't even visible. Re-evaluating how things are put together, and considering how they could be done more efficiently or otherwise improved is a valuable exercise—that it scratches a perfectionist itch is an added bonus. In this article I look at a variety of methods for creating boxes with rounded corners and gradients. Yep, it's a showdown!

The traditional approach

The well-established method of adding corners or gradients to an element is to use multiple background images. Depending to some extent on your content, this is typically impossible to achieve without the use of non-semantic extra mark-up. For example, this box uses to extra and empty divs:



	Willkommen! Welcome!
	Willkommen auf der Projekt Koru Seite, wo Simone & Bruce die praktischen Aspekte eines Jahres in Neuseeland mit Euch teilen wollen. Eine Einführung findet Ihr hier zusammen mit einer Erklärung warum wir das Koru als Symbol unserer Reise gewählt haben.
	Welcome to Project Koru, where Simone & Bruce share insight into the practicalities of organizing a year in New Zealand. You can find an introduction to the project here together with an explanation of why we chose the koru as the symbol for our journey.

Three gradient images (2 having one rounded corner each) could then be loaded into the background of each of the three "layout classes" via CSS:

.curvetop { height: 15px; background: #fff url('gradient-top.png') bottom left no-repeat; display: block; position: relative; margin-top: 10px; }
.curvemid { background: #fff url('gradient-bg.png') repeat-y; padding: 2px 20px !important; display: block; }
.curvebottom { height: 15px; background: #fff url('gradient-bottom.png') top left no-repeat; display: block; position: relative; margin-bottom: 10px; }

The result:

You could use this exact same technique for adding embellishments like borders, drop shadows and the like—but not without some Photoshop skills and a decent collection of bandwidth-hogging images if you needed multiple box styles.

The challenge

I devised a box that I thought would test the mettle of any technique. It consisted of just one div containing a header and a paragraph, the text in each of which should appear over a different background with one of these being a gradient (but not necessarily an image). The box should be formed with rounded corners (including on images), a white border, and a drop shadow. It should also have a number of functional characteristics:

Minimal mark-up i.e. avoiding nested and/or empty tags;
No changes to mark-up required (but extra CSS allowed, since this could be moved to an external stlesheet);
Valid XHTML and CSS (2.1);
Anti-aliasing on the corners (inner and outer border edges);
Small footprint (let's say under 20KB);
If using JavaScript it should degrade gracefully (i.e. still looks OK if JavaScript is disabled);
Liquid container (adjusting container width to both content size and browser window dimensions).

Why the requirement for minimal markup? Forward planning. Eventually CSS3 will arrive, and there'll be no need to scour your database in order to clean out all that redundant mark-up. Just amend your CSS and delete any unemployed images or JavaScript.

My template XHTML and CSS rendered the following:

Here is the live link.

Finding a solution to fulfil most if not all of my form and function requirements was going to be something of a mission. There's a useful roundup of techniques here, divided into those based on CSS and those based on JavaScript, with examples in both groups requiring anything from no images at all through to eight images. A particular difficulty was finding techniques not restricted by the dimensions of any required image; many of the earlier established methods were clearly devised before the availability of 23" widescreen displays (example.)

I made a shortlist (in no particular order) of techniques that looked promising and set to work. I'm not going to post all the code directly into this article or it will become over-long. The files I used for each technique, together with the master template and original full packages where applicable, are available for download should you wish checkout the code or conduct further experiments. I've tested only in Safari and Firefox.

Download the test files here (.zip archive, 428KB).

Nifty Corners Cube

First up is Nifty Corners Cube by Alessandro Fulciniti. This method uses JavaScript and CSS; no images other than those you wish to use as backgrounds are required. Here is the result:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: While you can produce a convincing rounded border, using padding on the container, this would require extra mark-up in our example in order to retain the cornering on our background images.

Drop shadow: Not supported.

Minimal mark-up: An extra container is required to render a border with inside and outside rounding.

Static mark-up: Mark-up edited to add extra container plus insert box-specific script.

W3C validity: Yes.

Anti-aliasing: Anti-aliasing is not working on the background images or border, although it does work on solid colour boxes in the examples.

Small footprint: 10KB for CSS and JavaScript (background images additional).

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Overriding fixed width for .cornered (and in the third case for .xtra) supports liquid layouts (case four).

Score: 8/12

curvyCorners

Cameron Cooke's curvyCorners is another image-free JavaScript solution:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: There are rounded corners, but these are rendered adjacent to our background content rather than on top of it. This example illustrates rounding on a background image, but adding a border to the containing div merely fills the cornered area with "extra" offset background (see here).

Border: Obtained by applying background and border to container.

Drop shadow: Not a feature of this technique.

Minimal mark-up: Yes.

Static mark-up: Mark-up edited to insert box-specific script.

W3C validity: Yes.

Anti-aliasing: Yes, but only on the outside of the rounded border (not on images).

Small footprint: 24KB for JavaScript (background images additional).

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Overriding fixed width for .cornered supports liquid layouts (case four).

Score: 7/12

SRCCB

The "simple rounded corner CSS boxes" technique was devised by Ryan Thrash, also accessible in the form of an online generator as Spiffy Box. It uses no JavaScript and a single image combined with moderately complex CSS (which would have to be recalculated for each box size):

Here is the live link.

Scoresheet:

Photo background: Supported (integrated into container background).

Gradient background: Supported (integrated into container background).

Four rounded corners: Yes (integrated into container background).

Border: Yes (integrated into container background).

Drop shadow: Yes (integrated into container background).

Minimal mark-up: Requires two additional divs for positioning purposes.

Static mark-up: Mark-up edited to insert two additional divs.

W3C validity: Yes.

Anti-aliasing: Yes (integrated into container background).

Small footprint: 6KB image overhead compared to master with original 2 background images.

Graceful degradation: Not applicable as no JavaScript.

Liquidity: Depends upon fixed-width images.

Score: 9/12

swfIR

The SWF Image Replacement (swfIR) technique is offered by Jon Aldinger, Mark Huot, and Dan Mall. It applies to inline (cf background) images and uses JavaScript and Flash to swap out the original and deck it out with bling. It does more than we require—image rotation and stretching for example, and at first glance it certainly looked like the wrong tool for the job. I wondered, however, if we could use CSS positioning to overlay our text on top of the replaced images. It turns out you can:

Here is the live link.

Scoresheet:

Photo background: Supported (as an inline image!).

Gradient background: Supported (as an inline image!).

Four rounded corners: Actually you get 6! (you could potentially blot out the bottom border on the heading using a third positioned inline image—a real hack!).

Border: Yes (specified in JavaScript).

Drop shadow: Yes (specified in JavaScript).

Minimal mark-up: Requires insertion of two inline images.

Static mark-up: Mark-up edited to insert inline images plus box-specific script.

W3C validity: Yes. It does validate, but should I say "No" because it depends on Flash?

Anti-aliasing: Yes.

Small footprint: 25KB (24KB JavaScript and SWF; 1KB image overhead compared to master with original 2 background images.)

Graceful degradation: Acceptable (just) with JavaScript disabled.

Liquidity: Positioning depends upon fixed-width images.

Score: 7/12

ShadedBorder

Steffen Ruzee brings you ShadedBorder, a full-featured solution that uses only JavaScript:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: Yes (specified in JavaScript), but height on .sb-inner causes blue background to show through (why isn't this also an issue with the h4 background image?). Setting height to 0 removes the bar but also takes out the gradient! Admittedly, you could style the background to tone in better.

Drop shadow: Yes (specified in JavaScript).

Minimal mark-up: A headline with it's own style can be achieved with extra mark-up, and extra script in the head, and another script that must be inserted before the closing body tag. This makes it fatally flawed for use in a templated system like WordPress, IMHO.

Static mark-up: As above, mark-up edited at 3 points, including a necessary change from div class to ID.

W3C validity: Yes.

Anti-aliasing: Yes.

Small footprint: 9KB JavaScript.

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Yes (comment out width on #cornered; not shown due to duplicate IDs).

Score: 9/12

SVG

Firefox 2 and Safari 3 can both display standalone Scalable Vector Graphics (SVG) images, an unloved W3C standard. They can't load SVG from CSS, however, making SVGs unusable as background images at this time. The option to use SVG in CSS hasn't gone beyond a proposal, with Wikipedia noting "the use of SVG on the web is in its infancy". It took me quite a few hours to get to grips with the examples in the 1.1 spec and create a valid and functional XHTML/SVG file for testing purposes. The basic idea is to create a bordered box with rounded corners, fill it with a gradient, and apply a Gaussian blur to a slightly offset box of the same dimensions—all with a few lines of XML. Here is our box using Opera 9.25 (Mac):

Here is the live link (SVG-aware browser required).

Scoresheet:

Photo background: Supported in CSS, but you loose the rounded corners.

Gradient background: Supported without CSS via linearGradient.

Four rounded corners: Yes via rx on rect.

Border: Yes via stroke on rect.

Drop shadow: Yes via filter with feGaussianBlur, feOffset, and feMerge.

Minimal mark-up: Requires insertion of inline SVG image(s).

Static mark-up: SVG must (currently) be added inline; also necessitates DOCTYPE change and .xhtml file extension.

W3C validity: Yes.

Anti-aliasing: Yes.

Small footprint: 0KB (background image additional; gradient image not required).

Graceful degradation: No (Internet Explorer 6 and 7 choke).

Liquidity: Positioning depends upon fixed-width SVG images; resizing text size or browser window is problematic.

Score: 7/12

Update 18.03.08: Safari 3.1 adds support for SVG images in img elements and CSS images.

CSS3

CSS3, if it ever arrives, promises not only rounded corners but drop shadows and multiple background images too (oddly the draft spec doesn't mention gradients). Apple's Safari (available for Mac and PC) already includes support for such effects—but of course it's not valid CSS. You can preview CSS3 rounded corners here and here in Firefox or Safari 3. Here is our box using Safari-specific not-quite-CSS3:

Here is the live link (WebKit browser required).

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: Yes.

Drop shadow: Yes.

Minimal mark-up: Yes.

Static mark-up: Yes.

W3C validity: No, but only because the standard isn't yet established.

Anti-aliasing: Yes, but note anti-aliasing artefact in the bottom corners.

Small footprint: 0KB (background images additional).

Graceful degradation: Yes (non-CSS3 aware browsers see a plain box).

Liquidity: Yes.

Score: 11/12

Summing up

Which technique you choose ultimately depends upon what you're after and what you prioritise. There is no one "best" solution that fits all requirements. In terms of form and function CSS3 has to be the clear winner if one must be chosen, with a perfect score blown only by the fact that it isn't a W3C standard (yet). Herein lies CSS3's only significant yet overwhelming drawback: what good is it if the majority users can't see the effects? At the same time I'm not personally sold on any of the alternative methods. The end results may look good; it's how they achieve them that I don't much care for. Although a method validates it typically involves cheating the validator (seemingly JavaScript's raison d'être). Just take a look at the live links with Safari's Web Inspector (example).

Before I put a lid on this little adventure, as Jobs would say, there's just one more thing... what about jQuery? The jQuery library (included with WordPress and the K2 theme) can be extended to render corners, shadows, and gradients. If this article was Part 1, then that exposition forms Part 2. ~~Coming soon~~.

bioneural.net site preference panel revisited

Bruce — Tue, 22 Jan 2008 20:06:51 +0000

From bioneural.net:

The first version of my site preference panel for WordPress needed lots of JavaScript for the toggle (Proto.aculo.us), more JavaScript to switch styles, and still more JavaScript to change text size. Version 2 still uses JavaScript for the toggle effect—but no additional load—since jQuery is already utilised by K2. The rest is accomplished using server-side PHP, and the revised 3-column panel layout makes use of more recent CSS know-how. I've tried to modularize the preferences panel as much as possible, but some simple template editing is still required (at 4 points). It is optimised for K2 (tested using RC3 and RC4) and although I haven't tested it with other themes (that's your job!) I don't see why it couldn't be used (*Some tweaking may be required. Batteries not included.)

Get the files

Let's get it done, then come back to the how and why if you're interested. Download the files to create your own preference panel as siteprefs.zip, available here. Expand the archive and upload the folder "siteprefs" into your K2 main directory:

/wp-content/themes/k2/siteprefs/

At this point you may also want to download and activate the Theme Switcher plugin if you plan on allowing your audience to change the WordPress theme they see on a per-user basis (storing their preference in a cookie). Support for the plugin is built into the preference panel (see features, below).

It's yours to play with and customise; all I ask is that you retain the little "i" icon with it's link back to these instructions. Feedback and suggestions for improvement are welcome. If you do modify it in a novel way (or use it in a theme other than K2), please leave a comment so I and others can check it out.

Right then, let's hack some templates!

Step 1: Look for cookies

Add the following code into PHP block at the top of K2's header.php (e.g. before the closing "?>"):

// Check cookie for stored site prefs
$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "alternate")) ? "alternate" : "style";

Here, "style" is the name of your main stylesheet (style.css in K2) and "alternate" is the name of a stylesheet we'll create at Step 5. If you're not using K2 pop this between PHP start and end tags at the top of your header template and set "style" to the name of your primary CSS file.

Step 2: Know your style

We need to replace the relative link to your stylesheet with one into which we can insert the value of the variable $layout. While we're here, we might as well link to the styling for the preference panel. In the head element of header.php replace this line (or your theme's equivalent):

with:

Your K2 custom stylesheet will still be loaded too, if you're using one.

Step 3: Flick the switch

Create a toggle to switch visibility of the preference panel on or off (it will be hidden on page load). The actual "switch" might be a text or an image link, inserted into an appropriate place (e.g your header or sidebar). If you prefer to add the toggle in the form of a tab in your K2 menu, look for ul class="menu" in header.php and replace this code:

	',''); ?>

with the following code:

	',''); ?>
	Prefs

If you'd rather use the supplied image (sitepref2.gif), place the following code after p class="description" (which is within div id="header") and before ul class="menu" in K2's header.php.

/siteprefs/img/sitepref2.gif" width="52" height="28" alt="siteprefs" />

The CSS to position the #siteprefs-toggle image within K2's header image area is included in the download (it will be ignored if you create a menu tab instead). If this position doesn't suit your theme of course you can overwrite this in siteprefs.css.

The toggle's "slide" effect depends on jQuery, which comes with K2 by default. If you're not using K2, you'll need to include the jQuery library in your head, find an alternative JavaScript (here is how v1 did it using Proto.aculo.us), or you may wish to dispense with the toggle altogether and ventilate your preferences permanently.

Step 4: Feel included

The file siteprefs.php includes the XHTML and PHP to build your preference panel. As well as providing the Theme Switcher control, it works with layout.php to toggle your main and alternate stylesheets (and store your choice in a cookie), and advises your audience on link behaviour. You can change the content of these three columns as you see fit just by editing siteprefs.php.

To get siteprefs.php into your theme we have to include it e.g. immediately below the closing tag of the div #header in header.php, so it appears to slide out from the K2 menu:

If you prefer you could put it at the top of your page, in the sidebar, or in the footer. Or anywhere. For sidebar placement, for example, you would likely edit siteprefs.php and siteprefs.css to respectively create and style a single vertical column.

At this point, if you refresh your site you should see the bioneural.net preference panel installed. If all went well and you're using a default K2 installation, you should be something like this:

Click thumbnail to enlarge image

Site preferences installed into default K2 theme (using image toggle)

Step 5: Go alternative

Finally we create an alternate stylesheet, named alternate.css (the name is specified in Step 1 and in layout.php).

What you put in here is up to you. You will likely want to import existing styling from your main stylesheet, and then write a handful of rules which, owing to the CSS "cascade", will overwrite some of those you just imported.

Here's a barebones example that increases font size and turns the default K2 fixed-width theme into a fluid/ liquid layout:

@import 'style.css';

body { font-size: 90%; } /* approx 30% larger than K2 default */
#page { width: 100% !important; border: 0; padding: 0; }
#primary { width: 100%; margin-left: -30px; padding-left: 30px; background-color: #fff;}
.content { background-color: #fff; } /* Match bg colour to #primary */
#sidebar-main.secondary { padding-left: 30px; border-right: 10px solid #f2f2f2; padding-bottom: 20px; } /* Border colour matches bg colour of .secondary */
.secondary { width: 100% !important; margin-left: -30px; background: #f2f2f2; }
#footer { background-color: #ccc; }

Upload alternate.css into the same directory as your main stylesheet (e.g. styles.css i.e. /wp-content/themes/k2/). This is important as the switch relies on your main and alternate stylesheets being in the same directory.

If you're having trouble overwriting rules for your alternate stylesheet, try !important e.g. width: 100% !important; but bear in mind IE6 will ignore it.

Build notes, features and credits

You don't have to read on—unless you're interested in how, why, and who helped make it work the way it does ;-)

The toggle effect

The toggle uses the jQuery JavaScript library and the code for this was covered in a previous article.

What if the user doesn't have JavaScript, or has it but disabled it? Version 1 hid the preference panel on page load using CSS, and showing it required JavaScript to change the styling to "display". Version 2 uses JavaScript to initially hide the panel, so if there is no JavaScript the panel will be revealed at the outset. Furthermore, because none of the controls in the panel utilize any JavaScript, no functionality is impaired. The only (minor) outcome is that the panel can't be hidden, but at least the "accessibility" preferences are, err, accessible.

A flexible 3-column framework

The XHTML mark-up and CSS for this is adapted from an example multi-column layout given in an ALA article by Alan Pearce. Alan cleverly builds on previous work that makes use of borders to simulate equal-height columns. Initially my mark-up used borders too, but after 2 days of trying to get it to work in IE6 and 7 with in-column padding I realised I didn't need them.

The fixed-width two-column K2 theme I use defaults to a width of 780px. To create our basic layout we create 3 divs (one for each column), and wrap these in a container div. The container sets up the 3 columns using floats and negative margins and then uses padding to effectively pull the outer columns back inside the container! We then create a header div and a footer div, and style the width of the outer columns (including padding) to 260px i.e. one third of our page width:

We can then apply a horizontally-repeating background image to the header and footer divs, match the background colours, and clear floats for the footer to position correctly. Here's what our panel now looks like topographically:

But the preference panel resizes, too. If your alternate stylesheet is "fluid" i.e. page content fits to the width of the browser window, the three columns will automatically space themselves out equally to fill the window:

Note that the left and right column width doesn't actually change, but the width of the middle column is no longer an implied 260px since we have set #siteprefs-center to occupy 100% width.

At this point everything is looking good—in Firefox, Safari, and IE7. You guessed it: Internet Exploder 6 is singing protest songs. We need to patch our CSS to make it work with IE6:

The IE escaping floats bug causes the contents of #siteprefs-header not to display. We just add width: 100%; to fix this.

The IE doubled float-margin bug causes #siteprefs-right to float outside of #siteprefs-wrapper! To fix this we add display: inline; to #siteprefs-right.

Switching whole themes

The Theme Switcher plugin for WordPress is by Ryan Boren. It sets a cookie so that the user's browser remembers their choice of theme for subsequent visits.

The bioneural.net preference panel uses conditional PHP to show the theme switcher dropdown menu or, if the TS plugin is not present or is present but not activated, they will see a "not enabled" message:

There are a few other things you might consider if you allow theme switching on your site; see Ben's list. To press the point, the preference panel includes a warning when the switcher is displayed that using it "may reduce functionality". At the very least you need to allow users to easily switch back to the previous theme—otherwise they'll have to wait a year until the cookie expires (not really; they could just delete the cookie!). In the sidebar of each theme you have installed, just paste the following:

If you don't like the list styling, this CSS (as used in siteprefs.css) will remove it:

#themeswitcher { list-style: none; padding-left: 0; }

Switching stylesheets

Previously I had used JavaScript to effect both a change in layout (fixed or fluid-width) and in text size (smaller, default, larger). Both of these are really accessibility issues—adapting to the size of your screen or the acuity of your vision. Add to this the observation that enlarging text size very soon causes problems within the confines of a fixed-width layout and it becomes clear why I decided to merge these features in version 2 i.e. biiger text, bigger container.

Stylesheet switching with memory is ideal, for example, if you want your iPhone/ tablet—or screen resolution-challenged work PC—to always use an alternative "accessible" layout. Cookies could likewise ensure that a different default style makes full use of your stunning 23" Apple Display.

Having decided against reusing the original ALA styleswitcher JavaScript, and considered using jQuery (as here—also JavaScript, but better), I looked at a few PHP options and settled on Roger Johansson's method.

Identifying off-site links

By default (Option 1) any link you tag with rel="external" will display the "off-site" icon (dimmed for visited links) using the included CSS. I prefer this option for identifying off-site links because it gives your audience the choice as to how links behave (the alternative is forcing them to open new windows using JavaScript or the depreciated target="_bank"). If you haven't religiously tagged your off-site links with rel="external" (or can't be bothered), you have two alternative options:

Open siteprefs.css and uncomment Option 2 (making sure the CSS for Options 1 and 3 is commented); this will apply the icon to all links other than to your own domain (credit). See the instructions in the file.
A WordPress plugin is available that will do it for you (Option 3). Once the Link Indication plugin is activated just uncomment the CSS for Option 3 in siteprefs.css (ensuring the CSS for Options 1 and 2 is commented-out).

Option 1 works in Firefox, IE7, and Safari (but not IE6). Option 2 works in Firefox and Safari (but not IE7 or IE6). Option 3 works in Firefox, IE7, IE6, and Safari (but does not differentiate between visited/ unvisited links).

Change log

Version	Notes
1.0	11.05.06. Initial 1.x release.
2.0	22.01.08. Initial 2.x release.
2.1	28.01.08. Corrected CSS for off-site links. Added alternative methods of identifying off-site links using pseudo-class (Option 2) or class (Option 3).

From Proto.aculo.us to jQuery

Bruce — Sun, 06 Jan 2008 18:31:03 +0000

From bioneural.net:

As I recently noted, both WordPress and K2 have migrated from using Prototype plus script.aculo.us to using the jQuery JavaScript library. Prototype is a JavaScript framework, including a library of functions used to build Ajax applications. It's best buddies with script.aculo.us, an add-on JavaScript effects library that extends the capabilities of the former. So where does jQuery fit in?

The winds of change

WordPress hasn't altogether dropped either Prototype or script.aculo.us. As of version 2.3.2 they're still bundled in wp-includes/js/, but the Codex notes that since version 2.2:

Switched to jQuery for core JS, which is lighter and faster.

I'm no programmer, but I do understand that loading a smaller function library is kinder on your bandwidth and browser, and that writing fewer lines of script to call those functions is kinder on web developers.

K2, on the other hand, stopped bundling Prototype and script.aculo.us as of revision 382. This popular WordPress theme now does all its Ajax magic—Live Search, Rolling Archives, and Live Comments—via jQuery.

Loosing weight

As of this writing Prototype (1.6.0.1) weighs in at 121 KB. The six core files that make up script.aculo.us 1.8.1 (sound.js and unittest.js are optional) also happen to total 121 KB, making a combined size of 242 KB. If I could therefore use jQuery 1.2.1 (at 45 KB) to achieve the same JavaScript-mediated effects, I'd be using around one fifth of the code libraries I was previously loading. But it's worse than that, because if I retained Proto.aculo.us for custom effects and loaded jQuery for K2, I'd be wasting bandwidth and CPU cycles like there was no tomorrow.

Prototype plus script.aculo.us

Here's how I was loading Proto.aculo.us in the head in my old WordPRess K2 r163 theme ("..." is a contracted path):

I built a toggle for my sidebar to display a list of category feeds, initially styled not to display on my home page, with the following:


Category feeds
.../styles/bioneural/feedicongrey.png" alt="Feed" />

A similar arrangement was used to hide and reveal my site preferences panel. Could I achieve the same using the lightweight jQuery?

Converting to jQuery

In my upgraded K2 RC3 theme I'm not loading any additional scripts in the head, because jQuery is already included. If you're not already using jQuery and just want to try it out, you can add it to your head temporarily and without uploading it to your own server like this:

Here's what I now have in sidebar.php using jQuery syntax (adapted from this example):

	
	Category feeds

It's as close to poetry as code gets, but initially I was using "$" in place of "jQuery" and the code had no effect at all. Thanks to Karl we determined that K2 was already using $, thus leading to the "Error: $ is not a function" I was getting:

That error usually occurs when a script tries to use the $ function before the core jQuery file has been loaded or when $ is being used for something else. Try replac[ing] each mention of $ with jQuery and see if that fixes the problem.

Issues

The only issue I've noticed is that you get a "flash" view of the hidden div when changing pages (on bioneural.net this affects the site preferences panel). While I generally discourage flashing, I don't believe in this case it's an arrestable offence.

Valid fix for PNG transparency on a single image

Bruce — Wed, 09 Aug 2006 21:59:28 +0000

From bioneural.net:

As you likely know, IE6 (and below) cannot handle PNG images that use alpha transparency. PNG produces graphically superior results compared to a transparent GIF image, which will often have a white fuzzy border. There are various "fixes" for this particular IE problem on the Web, but sometimes their application can have undesirable results, or the fix involves invalid XHTML or CSS. In my case I was prepared to accept grey backgrounds on the mini-icons used on bioneural.net, but there was one particular image where this really bugged me. Here's how I fixed it.

A general fix

At first I tried a JavaScript-based solution which was easy to install and automatically applied to all PNG images. Simply load the script in your header, enclosed in IE-specific conditional comments:

You can view and download pngfix.js here. Notice all those floats? I suspect they were responsible for my giving up on this method. For example, it messed up the feed icons in my sidebar (right, below), and for some reason that particular icon failed to complete loading in the IE progress bar (even though it was obviously being displayed). Weird. I don't like weird:

I did initially convert the affected images to .jpg (since this issue only affects floated images with a .png extension), but then decided "Why should I bend over backwards just for IE?". I reverted to the PNGs and continued to look for another solution. There's always another solution...

A specific fix

I subsequently discovered a solution that makes use of proprietary CSS and conditional comments for IE. I have few qualms about using proprietary tricks to fix proprietary mistakes!

Here's the relevant code that sits in my head element:

In my header div I've given the image I want to target an id of "pngfixband":

/styles/bioneural/whiteband-9rules-mt.png" alt="White band" width="115" height="115" title="bioneural.net recommends hosting with (mt) Media Temple" />

Notice how the padding (115px) in the styling corresponds to the height of the image specified in the markup? That's important.

In contrast to default behaviour (left, below), IE now does a respectable job of displaying this particular image as per my intentions (right, below)—but no other PNGs are adversely affected in the process:

No issues either for the XHTML or CSS Validator.

Embedding iStockPhoto feeds revisited

Bruce — Thu, 15 Jun 2006 11:17:53 +0000

From bioneural.net:

In an earlier post I described a JavaScript-based method to include recently-approved iStockPhoto images in a page on your website. When I migrated from a static blogging system (iBlog) to WordPress I found a useful plugin that worked very well in MAMP. Unfortunately it broke when I moved my developmental site to a live DreamHost server. Here is a bit more background to the problem and an eventual solution that uses SimplePie. Although the focus here is on displaying photographs, it's a solution that should work with practically any feed you might wish to embed.

No go with latestistockimages.php

I was initially using Christine's (of UTW fame) iStockPhoto plug-in for WordPress to display my latest approved images. This worked fine under a localhost development environment, but when I went "live" with DreamHost it stopped working due to the blocking out "outdated" PHP code that posed a security risk. For some reason my e-mails to the author went unanswered, and the download link has been a 404 for ages.

Plugging the gap with Feed2JS

I turned back to Feed2JS, with this in my sidebar:


	My iStockPhoto photocast
	/images/feedicon16px.png" alt="RSS" />

Here's what I got (with appropriate styling):

It worked pretty well for the most part, although relied on an external server which I had hoped to avoid. Sometimes is did seem to increase page loading times considerably.

Let's try feedList

I decided to try and replicate this with feedList, a WordPress plugin by Bill Rawlinson with "the ability to display linked lists imported from an RSS or ATOM feed". Here's what I put in my sidebar:


	My iStockPhoto photocast
	/images/feedicon16px.png" alt="RSS" />
	
	
		
		"http://www.istockphoto.com/istock_myfiles_rss.php?ID=430123&refnum=bmckenzie",
							"num_items"=>3,
							"show_description"=>true,
							"random"=>false,
							"sort"=>"none",
							"new_window"=>true,
							"show_date"=>false
					)
			);
		?>

The result was the "same"—except the image was missing altogether!

I contacted Bill who felt it was an issue with the built-in XML parser, as called by Magpie (probably not the bird), and resulting from an empty tag embedded within an empty link. Hmmm, I see... Well, we did agree it was "very odd", but no fix was on the horizon.

SimplePie to the rescue

SimplePie is:

... a very fast and easy-to-use class, written in PHP, for reading RSS and Atom syndication feeds.

I have to admit when I first encountered SimplePie (as beta 1) I was totally lost. I couldn't make sense of the documentation and was unable to get it working. But Ryan and team have done much of late to reach out to those of us with rudimentary knowledge of PHP. Beta 2 sees the release of a WordPress plugin, and SimplePie has matured into a true easy-to-use solution for "the rest of us". It's so simple that even the potentially scary bit—modifying CHMOD file permissions on the cache folder—was no big deal using Transmit:

With simplepie.inc installed, the cache folder created with appropriate permissions, and the plugin installed and activated, I could then replace the above code blocks with this:


My iStockPhoto photocast
	/images/feedicon16px.png" alt="RSS" />

The output of the SimplePieWP function is sent to the screen with "echo" and is given user-input values for the parameters of feed URL, and for display characteristics (number of items to show e.g. 3, whether and how to show the post date e.g. blank, and how much of the description to show e.g. all). Now to toss in a bit of CSS to the "mistock" class (credit to Dave Kellam at Eightface):

.mistock {
	text-align: center;
	display: inline;
	}

.mistock ul, .mistock li {
	list-style: none;
	}

.mistock h3 {
	display: none;
	}

.mistock a img {
	background: #fff;
	border: 1px #ccc solid !important;
	padding: 3px;
	margin: 5px 3px 5px;
	}

.mistock a:hover img {
	border: 1px #999 solid !important;
	}

The finished product

Your iStockPhoto embedded photocast should now look something like this:

The only persisting problem is that iStockPhoto offer a poorly-formed feed. I've contacted them twice about encoding ampersands and using "alt" tags to avoid validation errors, but I guess they see this as a low priority.

Update 31.08.06: Although I've not seen any official announcements, iStockPhoto began testing new RSS and Atom feeds in June (I was asked to give feedback). They now offer valid RSS 2.0 and Atom 1.0 feeds, but in the process of testing we discovered some bugs in SimplePie 1.0 beta 2 which, as yet, have not been resolved. The new feeds make it much easier to apply custom CSS when embedding the feed into your site.

Update 05.11.06: SimplePie 1.0 beta 3 has been released and allows you to integrate a valid iStockPhoto RSS feed (entity-encoding issues persist with the Atom feeds)..

Adding a site preferences panel

Bruce — Thu, 11 May 2006 16:03:40 +0000

From bioneural.net:

I recently spent an extortionate amount of time adding a site preferences panel to my site design. It's a solution composed of many parts, put together piece-by-piece with the knowledge and assistance of several Netizens. It is by no means perfect and certainly not indispensable—but it sure put my tinkering skills to the test. It surprises me how obscure information about adding site preferences is; Google searches on the subject have a high signal-to-noise ratio, and a couple of e-mail enquires to webmasters went unanswered. In keeping with my blog's tagline, here is the "stuff worth sharing". But mostly, as usual, I document the process mainly so I can remember how it was put together!

The site preference panel as been remade. Details here.

Requirements

The panel should be hidden by default;
It should offer a way to read with musical accompaniment;
It should allow CSS to be disabled (e.g. for small screen viewing);
It should allow stylesheet switching, and be resize-able;
It should allow the user to change font size;
It should be constructed and laid out using valid XHTML and CSS;
It should work (well enough) in Safari, Firefox, Internet Explorer 6+.

Toggle the panel on/off

I wanted to create the effect of the prefs panel sliding out from under the navigation menu in the header. Likewise, it should slide up into the menu when the panel is closed. The K2 theme for WordPress already includes a (partial) script.aculo.us JavaScript effects library. Kristin Pishdadi blogged her method of utilizing this to toggle site navigation items, and adapting the same trick to display site preferences seemed like a logical development.

Instead of a text link for the toggle, I used a graphical "switch" positioned within the header. Originally this had no label and (according to feedback in the WordPress Forum) could be overlooked. To address this valid criticism I added a text label to make the function a little more transparent. The code for the switch, within div id="header", is:



/sitepref2.gif" width="52" height="28" alt="prefs" />

Positioning is done with the following CSS:

#prefs {
position: absolute;
float: right;
left: 100%; /* needed for safari + firefox */
top: 130px;
margin-left: -80px;
z-index: 1000000000;
}

Note that the switch won't display the panel unless JavaScript is enabled (as it nearly always is). Which is a good thing, since switching styles and changing font size won't work if JavaScript is disabled anyway.

Now to place that panel. This is added to header.php just below div id="header" (which contains ul class="menu") like this:

Note that the div has an inline style set to hide the div by default. We get to style the div for display below.

Soundtrack options

Oh, you're still reading? I like listening to music but I can't make any, and don't want repetitive embedded audio files terrorizing my readers (I hope there's more than one!). What we need is streaming radio—so how do we deliver it? My solution was to offer a pick-list of several Internet radio stations using various formats, in the hope that a given reader will have a client already installed that will playback at least one. It's perhaps a stretch to call this an "integrated" solution—but I use it to bookmark my favourite stations without the need to know in advance which client to launch. On my system I simply choose the station I want to hear and the appropriate client launches and begins streaming in the background, while I continue surfing.

The station selector is added within div id="sitepref" thus:


SOUNDTRACK

Internet radio tuner:






Client: Player

Client may require configuration

Turn off CSS

Note to self: find an evening class to learn PHP! Disabling CSS sounds so simple, but getting this to work proved to be a challenge. When it comes to PHP and JavaScript my knowledge is pretty-much cut-and-paste.

In truth I'm not sure how important this functionality is in the Real World, but here in the Matrix "getting naked" and exposing your (hopefully) semantic markup is unadulterated nerdiness. There's nothing (much) erotic about looking at a site with no CSS on, but it can be a pleasure to get "back to basics" and relive the early style-constrained days of the web. Ah yes, the browser-default serif font and general lack of excitement that turns beautiful Safari into a Mosaic clone...

I looked into two ways to toggle CSS off and on, one "styleswitcher" based around JavaScript and the other around PHP. I actually tried several variations of each, but the choice essentially came down to two:

JavaScript styleswitcher

The ALA styleswitcher.js by Paul Sowden is pretty well-known. As well as a link to the appropriate JavaScript an empty href is required in the header:

The actual switch is built like this:

Off
 | On

The above is simplified; I got unexpected styling results, presumably because of the way K2 separates the default from the user-defined styles. You may fair better. Because styleswitcher.js sets a cookie, the CSS state will persist from page-to-page.

PHP styleswitcher

I found Chris Clark's PHP Switcher difficult to adapt. Although it can be repurposed for WordPress templates I wanted some simple code I could understand and that would keep my template intelligible. And Joe Skidmore provided it. With help from Joe and Marcus Crestani (who also wrote a PHP switcher) I could add a simple CSS toggle thus:

The first line encodes the ampersand that would otherwise generate a XHTML validation error (see here).

The second and last line of PHP enclose all the stylesheets and form the basis of the toggle (the middle bit is K2-specific). If css=false then nothing will be included between the comments; if css=true you'll get the lot. The actual switch is built like this:

Off | On

Despite some much-appreciated help, I wasn't able to get the CSS on/off state to persist using a session variable or cookie, in a way that suited my header.php template and its multiple stylesheet links. The solution? Decide persistence doesn't pay.

Alternative styles

You already know how this works—it's styleswitcher.js again! I wrote some rules in fluid.css to break the design out of its fixed-width container, allowing it to re-size according to the width of the browser window, with the primary content stacked on top of the sidebar.

Fluid
 | Fixed

What about swapping WordPress themes on the fly? Get this plug-in.

Changing font size

Some sites allow the user to specify an exact font size, or even typeface. I wanted a basic "size up" and "size down" control, and found a JavaScript solution here.

It's easy to implement, seems to work across the main browsers, and avoids having to have multiple additional stylesheets for each font size.

Resize-able three-column CSS layout

Having ditched the temporary table, I joined Matthew Levine in his quest for the Holy Grail, and decided to layout the prefs panel as a mini page (with header, 3 columns, and footer) inside a page. It may take some trial-and-error, and a calculator is optional, but the result is something like this (colours changed to highlight divs; the middle div is fluid-width):

The footer contains only an image, with the div height set to the height of the image:

#pfooter {
height: 10px;
background: #f2f2f2 url(spike.png) bottom center repeat-x;
}

For the record, here is the markup for the siteprefs div less the actual controls/ toggles:


bioneural.net site preferences


STYLING
etc.


SOUNDTRACK
etc.


READABILITY
etc.

The CSS is slightly modified from this ALA example file.

Wow. What an Odyssey! I ask only, am I at the beginning or the end?

Lightbox JS v2.0

Bruce — Wed, 29 Mar 2006 18:24:54 +0000

From bioneural.net:

Lightbox JS v2.0: Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.