WP-Mix

At WP-Tao.com, I use jQuery Superbox to display lightbox-style popup images and screenshots. Here is a quick mod used to replace rel attributes with data-rel.

For the project, it was necessary to replace rel attributes with data-rel so the script would gel with other events on the page. Here’s how to do it in 2 steps:

1. In the Superbox script, replace all instances of rel with data-rel
2. In your markup, likewise replace rel with data-rel

As of Superbox version 0.9.1, there were three instances of rel that needed changed. That may change in future versions of the plugin.

You can see this modification in action at WP-Tao.com (scroll about halfway down the page).

More about why/how this is useful

Testing the WP-Tao homepage with the W3C HTML Validator, I was getting errors such as:

HTML5 Error: Bad value lightbox for attribute rel on element a: Keyword lightbox is not registered.

The rel attributes generated by Superbox needed changed to data-rel (or whatever is preferred for data-*, so the fix was the modification described previously.

Unfolding the region of code that requires modification results in this:

// Dispatch types
    function dispatch() {
        
        // Match all superbox links
        $("a[rel^=superbox],area[rel^=superbox]").each(function() {
            
            // Optimisation
            var $this = $(this),
            relAttr = $this.attr("rel"),

Then after swapping rel with data-rel:

// Dispatch types
    function dispatch() {
        
        // Match all superbox links
        $("a[data-rel^=superbox],area[data-rel^=superbox]").each(function() {
            
            // Optimisation
            var $this = $(this),
            relAttr = $this.attr("data-rel"),

No other modifications are required, pretty simple really and with no validation errors.