我正在使用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张照片。
谢谢。
如果你想在一个有效的 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>
这是验证过的！！...在这里查看示例。
注意：这适用于fancybox v2.x
我该如何解决这个问题？
你需要重写代码，不要使用无意义的术语“group1”来描述当前页面和图片之间的关系。
HTML5提供了data-*系列属性，用于仅添加供JS使用的数据。没有必要劫持rel属性，它具有定义好的含义。
如果您仍在使用不支持data-fancybox-group的fancybox v 1.x版本，则可以轻松修改脚本。
您只需要查找并替换“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>
rel属性指定当前文档与链接文档之间的关系。该属性有一组有限的可能值，列在此处：http://www.w3schools.com/tags/att_link_rel.asp。使用非标准值将导致验证警告，只能通过将rel属性更改为标准值或完全删除来进行更正。
我不太确定您为什么要在那里使用该属性，但是有几个替代方案可以正确验证：