Validating HTML 5 with REL

I have browsed for a question similar to this but haven't happened to find exactly what i need but apologies if it has been answered somewhere.

I have started using java script light-boxes in my webpage to display images and am told to place on the links: <a href="..." rel="lightbox"></a>

This means that the images now open in lightboxes however an HTML 5 validator says that 'lightbox' is obviously not an allowed link type.

How can i relate the required links to the lightbox java script so that it开发者_如何转开发 validates?

thanks alot in advance, matt

---

Either

1. Ignore the validation errors (as they don't cause any problems), or

2. Change from rel="lightbox" to something like data-lightbox="true". Any attribute starting with "data-" is allowed and valid in HTML5.

---

Matthew's answer works, but you must remember to customize your lightbox source code as well. The example of such a modification you can see here: http://wasthere.com/lightbox2/js/custom-lightbox.js - it works (you can see here e.g. http://wasthere.com/asia/en/show-entry/141/kerala---munnar-(india) ), HTML5 validation passes. Check the comments in source file above, if you decide to use it - just change all "rel" attributes relevant to light box images to "data-rel" on your site.

Best regards, Lukas

---

what helped me validating it, is based on what was stated above:

Javascript

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";
        }

        if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "lightbox")
        {
            anchor.setAttribute('data-lightbox','lightbox');
        }
    }
}
window.onload = externalLinks;

HTML:

<a href='assets/newsTemplate/07_350wtd.jpg' rel='lightbox' title='DumbThumb'><img src='assets/newsTemplate/07_350wtd.jpg' alt='dumb'></img></a>

---

A si lo solucione:

Modifico el html:

<a href="img/2.jpg"  data-rel="lightbox" title="" > 

Modifico el javascript:

jQuery(function($) {
        $("a[data-rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
        });
    });
}