Question

我正在使用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>

但是我在验证代码时遇到错误。它说：

Bad value group1 for attribute rel on element a: Keyword group1 is not registered.

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

谢谢。

Answer 1

如果您想在有效的HTML文档中设置fancybox图库（仅仅因为我们都是纯粹主义者），那么您需要两件事：

1：HTML5 DOCTYPE

<!DOCTYPE html>

2：使用data-fancybox-group属性而不是rel属性，如：

<a class="fancybox" data-fancybox-group="group1" href="img/work/1.jpg"></a>

验证!! ......见sample here

注意：这适用于fancybox v2.x

Answer 2

如何解决此问题？

您重写代码，因此它不会尝试使用无意义的术语＆＃34; group1＆＃34;来描述当前页面与图像之间的关系。

HTML 5提供了data-*系列属性，用于仅为JS的目的添加数据。没有必要劫持rel，它具有明确的含义。

Answer 3

如果您仍在使用fancybox v 1.x（不支持data-fancybox-group），您可以轻松修改脚本。

您只需要使用其他内容搜索并替换“rel”属性，例如“data-fancybox-gallery”。

搜索字符串“rel”时，您会找到4个元素。请注意更改最后3个，因为您找到的第一个“rel”是位置的一部分： rel ative 。

这是你必须改变的部分：

        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>

Answer 4

您收到验证错误，因为rel属性有一个预期的值列表（请参阅http://www.w3schools.com/html5/att_a_rel.asp）。

没有什么办法可以解决这个问题，Fancybox正在将该属性用于非预期目的。这没什么不对。网页不必100％'有效'。

Answer 5

如何解决此问题？

你不需要。验证程序为rel属性接受的值范围是有限的。

显然，Fancybox以验证者不理解的方式使用该属性，因此它发出警告错误;但这并不关心你。

我没有正确编写代码吗？

是的，你是。

Answer 6

rel属性指定当前文档与链接文档之间的关系。该属性包含一组有限的可能值，如下所示：http://www.w3schools.com/tags/att_link_rel.asp。使用非标准值将导致验证警告，只能通过将rel属性更改为标准值或将其完全删除来纠正。

我不太清楚为什么你有这个属性，但是有几种方法可以正确验证：

如果您尝试针对每个项目存储信息，并且您的网站使用HTML5 doctype，则可以使用data- *属性。用法示例：data-group =“1”。然后，您可以通过javascript访问数据集，请参阅此处：http://slides.html5rocks.com/#custom-data
如果您尝试访问css选择器中的项目，则可以将“group1”作为第二个类添加到项目中。
如果您尝试通过JavaScript访问项目并且未使用XHTML文档类型，您可以考虑将其name属性设置为“group1”，然后使用getElementsByName（'group1'）函数。

使用fancyBox的HTML属性rel错误

6 个答案: