Question

我浏览了一个类似的问题，但我没有找到我需要的确切内容，但如果已经在某个地方得到了解答，请道歉。

我已经开始在我的网页中使用java脚本灯箱来显示图片，并被告知要放在链接上：<a href="..." rel="lightbox"></a>

这意味着图像现在在灯箱中打开，但是HTML 5验证器说“灯箱”显然不是允许的链接类型。

如何将所需链接与灯箱java脚本相关联，以便验证？

非常感谢，亚光

Answer 1

无论

忽略验证错误（因为它们不会导致任何问题）或
从rel="lightbox"更改为data-lightbox="true"之类的内容。任何以“data-”开头的属性都是允许的，并且在HTML5中有效。

Answer 2

马修的答案有效，但您必须记住自定义灯箱源代码。您可以在此处看到此类修改的示例：http://wasthere.com/lightbox2/js/custom-lightbox.js - 它有效（您可以在此处看到，例如http://wasthere.com/asia/en/show-entry/141/kerala---munnar-(india）），HTML5验证通过。检查上面源文件中的注释，如果您决定使用它 - 只需将与灯箱图像相关的所有“rel”属性更改为您网站上的“data-rel”。

祝你好运，卢卡斯

Answer 3

是什么帮助我验证它，是基于上面所说的：

<强>的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>

Answer 4

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

使用REL验证HTML 5

4 个答案: