Jquery 使用fancyBox的HTML属性rel错误_Jquery_Html_Fancybox

Jquery 使用fancyBox的HTML属性rel错误

jquery html

Jquery 使用fancyBox的HTML属性rel错误,jquery,html,fancybox,Jquery,Html,Fancybox,我正在使用fancyBox创建一个具有以下代码的库： <a class="fancybox" rel="group1" href="img/work/1.jpg"></a> <a class="fancybox" rel="group1" href="img/work/2.jpg"></a> <a class="fancybox" rel="group1" href="img/work/3.jpg"><img src="img/t

我正在使用fancyBox创建一个具有以下代码的库：

<a class="fancybox" rel="group1" href="img/work/1.jpg"></a>
<a class="fancybox" rel="group1" href="img/work/2.jpg"></a>
<a class="fancybox" rel="group1" href="img/work/3.jpg"><img src="img/th/thumb.jpg" alt="Thumb" /></a>

如何解决此问题？我没有正确地写出代码吗？我基本上想要一个缩略图，有3张照片可以滚动浏览

多谢各位

如何解决此问题

你不需要。验证程序为

rel

属性接受的值范围是有限的

显然，Fancybox以验证器不喜欢的方式使用该属性，因此它会发出错误警告；但这与你无关

我没有正确地写出代码吗

是的，你是

如何解决此问题

您重写了代码，这样它就不会试图用无意义的术语“group1”来描述当前页面和图像之间的关系

HTML5提供了

data-*

一系列属性，用于仅为JS目的添加数据。无需劫持具有定义含义的

rel

。

您会收到验证错误，因为rel属性有一个它期望的值列表（请参阅）

您无法解决此问题，Fancybox正在将该属性用于非预期用途。这没什么错。网页不必100%有效。

属性指定当前文档和链接文档之间的关系。该属性具有一组有限的可能值，如下所示：。使用非标准值将导致验证警告，该警告只能通过将rel属性更改为标准值或将其全部删除来更正

我不太清楚为什么会有该属性，但是有几个选项可以正确验证：

如果您试图存储每个项目的信息，并且您的网站使用HTML5 doctype，那么您可以使用data-*属性。用法示例：数据组=“1”。然后，您可以通过javascript访问数据集，请参见此处：
如果您试图访问css选择器中的项目，则可以将“group1”作为第二个类添加到项目中

如果您想在有效的

HTML

文档中拥有fancybox图库（仅仅因为我们都是纯粹主义者；），那么您需要两件事：

1：HTML5 DOCTYPE

<!DOCTYPE html>

这验证了。。。看

注意：这是针对fancybox v2.x的

如果您仍在使用fancybox v1.x（不支持数据fancybox组），您可以轻松地稍微修改脚本

您只需搜索“rel”属性并将其替换为其他属性，例如“data fancybox gallery”

搜索字符串“rel”时，您将找到4个元素。只需小心更改最后3个，因为您找到的第一个“rel”是position:relative的一部分

这是您必须更改的部分：

        var c = a(this).attr("rel") || "";
        if (!c || c == "" || c === "nofollow") {
            n.push(this)
        } else {
            n = a("a[rel=" + c + "], area[rel=" + c + "]");
            l = n.index(this)
        }

让它：

        var c = a(this).attr("data-fancybox-gallery") || "";
        if (!c || c == "" || c === "nofollow") {
            n.push(this)
        } else {
            n = a("a[data-fancybox-gallery=" + c + "], area[data-fancybox-gallery=" + c + "]");
            l = n.index(this)
        }

然后你的代码应该是：

    <a class="fancybox" data-fancybox-gallery="group1" href="img/work/1.jpg"></a>
    <a class="fancybox" data-fancybox-gallery="group1" href="img/work/2.jpg"></a>
    <a class="fancybox" data-fancybox-gallery="group1" href="img/work/3.jpg"><img src="img/th/thumb.jpg" alt="Thumb" /></a>

这难道不意味着要重写jQuery插件吗？是的，清洁的解决方案，但有些不切实际。（我不知道这个插件，但是是的。如果它们很好，它们已经支持

data-*

attributes。）我不会重写这个插件。别管它。如果它可以在你的浏览器中使用，那就好了。验证在某种程度上是很好的。如果你不知道自己在做什么，就不应该违反规则，但一旦你知道规则，就可以随意改变它们（只要你的页面正常工作），这是我的观点+1因为你提到HTML5提供了数据-*而fancybox v2.x包含了这个选项（见下面我的答案）@Quentin:哦，我明白了。你可以争辩说，在不危及无辜小猫生命的情况下忽略它是可以的但是我知道它不是有效的HTML，并且有更好的方法来解决这个问题（但是插件作者可能没有考虑过这些方法）。这是一个错误吗？fancybox不起作用了？还是这只是一个验证程序给了你错误？@Jeremy我怀疑是后者。@JeremyMiller fancyBox工作正常。我只是想让我的代码得到验证。很好的讨论。非常感谢你/是的，我确实认为这是一件非常好的事情，但有时这是不可避免的。它仍然可以很好地工作，而且很有可能没有人会知道！您可以对此采取一些措施-请参阅公认的答案：

        var c = a(this).attr("data-fancybox-gallery") || "";
        if (!c || c == "" || c === "nofollow") {
            n.push(this)
        } else {
            n = a("a[data-fancybox-gallery=" + c + "], area[data-fancybox-gallery=" + c + "]");
            l = n.index(this)
        }

    <a class="fancybox" data-fancybox-gallery="group1" href="img/work/1.jpg"></a>
    <a class="fancybox" data-fancybox-gallery="group1" href="img/work/2.jpg"></a>
    <a class="fancybox" data-fancybox-gallery="group1" href="img/work/3.jpg"><img src="img/th/thumb.jpg" alt="Thumb" /></a>