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').