HTML-атрибут rel Ошибки с использованием 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/th/thumb.jpg" alt="Thumb" /></a>
Но я получаю ошибки при проверке кода. В нем говорится:
Bad value group1 for attribute rel on element a: Keyword group1 is not registered.
Как исправить эту проблему? Я не правильно пишу код? В основном я хотел один эскиз, с тремя фотографиями для прокрутки.
Спасибо.
Ответы
Ответ 1
Если вы хотите иметь галерею fancybox в действительном документе HTML
(просто потому, что все мы пуристы;), вам нужно две вещи:
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
Ответ 2
Как исправить эту проблему?
Вы переписываете код, чтобы он не пытался описать связь между текущей страницей и изображением с бессмысленным термином "group1".
HTML 5 предоставляет серию атрибутов data-*
для добавления данных исключительно для целей JS. Нет необходимости захватывать rel
, который имеет определенное значение.
Ответ 3
Если вы все еще используете fancybox v 1.x(который не поддерживает группу данных fancybox), вы можете легко изменить бит script.
Вам нужно только искать и заменять атрибут "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>
Ответ 4
Вы получаете ошибку проверки, потому что атрибут rel имеет список ожидаемых значений (см. http://www.w3schools.com/html5/att_a_rel.asp).
Вы ничего не можете поделать, чтобы исправить это, Fancybox использует атрибут для цели, для которой это не предназначено. В этом нет ничего плохого. Веб-страницы не должны быть 100% "действительными".
Ответ 5
Как исправить эту проблему?
Вам не нужно. Диапазон значений, которые принимает валидатор для атрибута rel
, ограничен.
Очевидно, что Fancybox использует этот атрибут таким образом, что валидатор не оценивает, поэтому он выдает ошибку предупреждение; но это не должно вас беспокоить.
Я не правильно пишу код?
Да, вы.
Ответ 6
Атрибут rel
указывает связь между текущим документом и связанным документом. Атрибут имеет ограниченный набор возможных значений, перечисленных здесь: http://www.w3schools.com/tags/att_link_rel.asp. Использование нестандартного значения приведет к предупреждению о валидации, которое может быть исправлено только путем изменения атрибута rel на стандартное значение или вообще его удаления.
Я не совсем уверен, почему у вас есть атрибут, однако есть несколько альтернатив, которые будут корректно проверяться:
- Если вы пытаетесь хранить информацию по каждому элементу, а ваш сайт использует doctype HTML5, вы можете использовать атрибут data- *. Пример использования: data-group = "1". Затем вы можете получить доступ к набору данных через javascript, см. Здесь: http://slides.html5rocks.com/#custom-data
- Если вы пытаетесь получить доступ к элементам в селекторе css, вы можете добавить "group1" в качестве второго класса к элементам.
- Если вы пытаетесь получить доступ к элементам через JavaScript, и вы не используете доктрину XHTML, вы можете альтернативно рассмотреть возможность установки их атрибута имени на "group1", а затем с помощью функции getElementsByName ('group1').