jQuery 使用fancyBox的HTML属性rel错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9037061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Attribute rel Errors using fancyBox
提问by kaoscify
I'm using fancyBox to create a gallery with the following code:
我正在使用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>
But I'm getting errors while validating the code. It says:
但是我在验证代码时遇到错误。它说：
Bad value group1 for attribute rel on element a: Keyword group1 is not registered.
How do I fix this issue? Am I not writing the code out correctly? I basically wanted one thumbnail, with 3 photos to scroll through.
我该如何解决这个问题？我没有正确地写出代码吗？我基本上想要一个缩略图，有 3 张照片可以滚动。
Thank you.
谢谢你。
回答by JFK
If you want to have a fancybox gallery within a valid HTMLdocument (just because we are all purists ;) then you need two things:
如果您想在有效HTML文档中拥有一个花哨的画廊（仅仅因为我们都是纯粹主义者；）那么您需要做两件事：
1: An HTML5 DOCTYPE
1：HTML5 DOCTYPE
<!DOCTYPE html>
2: use the data-fancybox-groupattribute rather than the relattribute like:
2：使用data-fancybox-group属性而不是rel像这样的属性：
<a class="fancybox" data-fancybox-group="group1" href="img/work/1.jpg"></a>
That validates!! ... see sample here
NOTE: this is for fancybox v2.x
注意：这是用于fancybox v2.x
回答by Quentin
How do I fix this issue?
我该如何解决这个问题？
You rewrite the code so it doesn't try to describe the relationship between the current page and the image with the nonsense term "group1".
您重写代码，使其不会尝试使用无意义的术语“group1”来描述当前页面和图像之间的关系。
HTML 5 provides the data-*series of attributes for adding data solely for the purpose of JS. There is no need to hiHyman rel, which has a defined meaning.
HTML 5 提供了data-*一系列用于添加数据的属性，仅用于 JS 的目的。没有必要劫持rel，它具有明确的含义。
回答by Marius St?nescu
If you are still using fancybox v 1.x (which does not support data-fancybox-group) you can easily modify the script a bit.
如果您仍在使用fancybox v 1.x（不支持data-fancybox-group），您可以轻松地稍微修改脚本。
You only have to search and replace the "rel" attribute with something else, for instance "data-fancybox-gallery".
您只需搜索“rel”属性并将其替换为其他内容，例如“data-fancybox-gallery”。
When searching for the string "rel" you will find 4 elements. Be carefull only to change the last 3, because the first "rel" you find is part of position:relative.
搜索字符串“rel”时，您将找到 4 个元素。要当心只有改变过去的3，因为第一个“相对”你找到的是一部分的位置是：相对ative。
This is the part you have to change:
这是您必须更改的部分：
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)
}
Make it:
做了：
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)
}
And then your code should be:
然后你的代码应该是：
<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>
回答by Adam Pope
You are getting the validation error because the rel attribute has a list of values that it is expecting (see http://www.w3schools.com/html5/att_a_rel.asp).
您收到验证错误是因为 rel 属性具有它期望的值列表（请参阅http://www.w3schools.com/html5/att_a_rel.asp）。
There is nothing you can do to fix this, Fancybox is using the attribute for a purpose for which is was not intended. There's nothing wrong with that. Web pages don't have to be 100% 'valid'.
您无法解决此问题，Fancybox 将该属性用于非预期目的。没有什么不对的。网页不必100%“有效”。
回答by Tomalak
How do I fix this issue?
我该如何解决这个问题？
You don't need to. The range of values that the validator accepts for the relattribute is limited.
你不需要。验证器接受的rel属性值范围是有限的。
Obviously Fancybox makes use of that attribute in a way that the validator does not appreciate, so it issues a warningan error; but this does not have to concern you.
显然 Fancybox 以验证器不喜欢的方式使用该属性，因此它发出警告和错误；但这与您无关。
Am I not writing the code out correctly?
我没有正确地写出代码吗？
Yes, you are.
是的，你是。
回答by lpd
The relattribute specifies the relationship between the current document and the linked document. The attribute has a limited set of possible values, listed here: http://www.w3schools.com/tags/att_link_rel.asp. Using a non-standard value will cause a validation warning which can only be corrected by changing your rel attribute to a standard value or removing it altogether.
该rel属性指定当前文档和链接文档之间的关系。该属性具有一组有限的可能值，在此处列出：http: //www.w3schools.com/tags/att_link_rel.asp。使用非标准值将导致验证警告，只能通过将 rel 属性更改为标准值或将其完全删除来纠正。
I'm not quite sure why you have the attribute there, however there are several alternatives that will validate correctly:
我不太确定为什么你在那里有这个属性，但是有几种替代方法可以正确验证：
- If you are trying to store information against each item and your website uses the HTML5 doctype then you can use the data-* attribute. Example usage: data-group="1". You can then access the dataset via javascript, see here: http://slides.html5rocks.com/#custom-data
- If you are trying to access the items in a css selector then you can add "group1" as a second class to the items.
- If you are trying to access the items via JavaScript and you are not using the XHTML doctype you may alternatively consider setting their name attribute to "group1", then using the getElementsByName('group1') function.
- 如果您尝试针对每个项目存储信息并且您的网站使用 HTML5 文档类型，那么您可以使用 data-* 属性。示例用法：data-group="1"。然后您可以通过 javascript 访问数据集，请参见此处：http: //slides.html5rocks.com/#custom-data
- 如果您尝试访问 css 选择器中的项目，那么您可以将“group1”添加为项目的第二类。
- 如果您尝试通过 JavaScript 访问项目并且您没有使用 XHTML 文档类型，您也可以考虑将其名称属性设置为“group1”，然后使用 getElementsByName('group1') 函数。
