If you’re using GreyBox in an HTML5 document you are likely to receive an error validating your HTML document.

The error looks something like this:

1

Bad value gb_page_center[500, 500] for attribute rel on element a: Keyword gb_page_center[500, 500] is not registered

The problem is, as the HTML5 validation error message explains, "gb_page_center[500, 500]" is an invalid value for the rel attribute. Chances are, this will have little to no impact on how the page actually renders – your code should still work fine and GreyBox will still function. But if you’re trying to adhere to valid HTML5 markup it doesn’t suffice.

Fortunately, I discovered a dead simple fix for the problem. Although it does involve hacking up GreyBox JavaScript (just a tiny bit though, I promise).

The HTML 5 spec allows for custom data attributes that are easily defined by prefixing the attribute name with “data-“. So, instead of using the rel attribute, we can define a custom attribute named data-rel.

So, instead of adding the rel attribute to your link, use data-rel:

1

<a data-rel="gb_page_center[500, 500]">Gabriel Harper</a>

The only problem is GreyBox is still looking for the rel attribute for its data. So, we need to change that.

We need to edit the file gb_script.js to use the new attribute name. Around line 163-164, find the following code:

1
2

if(a.getAttribute("href")&&a.getAttribute("rel")){
var rel=a.getAttribute("rel");

Now, just change rel to data-rel:

1
2

if(a.getAttribute("href")&&a.getAttribute("data-rel")){
var rel=a.getAttribute("data-rel");

That’s it! Just two lines of code. GreyBox still works, the document validates as HTML5 and we can go on feeling special for validating to a spec that’s still only loosely supported. 🙂