HTML атрибут REL ошибки с помощью FancyBox

Я использую FancyBox создать галерею со следующим кодом:HTML атрибут REL ошибки с помощью 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.

Как исправить эту проблему? Я не правильно пишу код? Я в основном хотел один миниатюру, с тремя фотографиями для прокрутки.

спасибо.

источник

2012-01-27 mapr

Если вы хотите иметь FancyBox галерею в пределах допустимого HTML документа (только потому, что мы все пуристы;), то вам нужно две вещи:

1: DOCTYPE HTML5

<!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

источник

2012-01-27 17:57:56 JFK

Ничего себе, отлично. Это работает! Спасибо JFK. – mapr

+1 Очень хорошее решение. – Tomalak

очень полезно, спасибо! –

Как исправить эту проблему?

Вам не нужно. Диапазон значений, которые принимает валидатор для атрибута rel, ограничен.

Очевидно, что Fancybox использует этот атрибут таким образом, чтобы валидатор не оценил, поэтому он выдает ~~предупреждение~~ ; но это не должно вас беспокоить.

Я не правильно пишу код?

Да, вы есть.

источник

2012-01-27 16:59:35 Tomalak

Это ошибка, а не предупреждение , – Quentin

@Quentin: О, я вижу. Вы можете утверждать, что это нормально игнорировать, не рискуя жизнью невинных котят. ;) Но я понимаю, что это неверный HTML, и есть более эффективные способы решения этой конкретной проблемы (но авторы плагинов, возможно, не подумали об этих путях). – Tomalak

Это ошибка, которую вы получаете, и fancybox не работает? Или это просто программа проверки, дающая вам ошибки? –

Как исправить эту проблему?

Вы переписываете код, чтобы он не пытался описать связь между текущей страницей и изображением с бессмысленным термином «группа 1».

В HTML 5 представлена серия атрибутов data-* для добавления данных исключительно для целей JS. Нет необходимости перехватывать rel, который имеет определенное значение.

источник

2012-01-27 17:03:30 Quentin

Разве это не означает переписывание этого плагина jQuery? Да, чистое решение, но несколько непрактичное. (Я не знаю плагина, но да. Если они хороши, они уже поддерживают атрибуты data- *.) – Tomalak

@Tomalak - Это должно быть довольно тривиальное редактирование плагина. – Quentin

Да, никаких аргументов нет. :) – Tomalak

Вы получаете ошибку проверки, потому что атрибут rel имеет список ожидаемых значений (см. http://www.w3schools.com/html5/att_a_rel.asp).

Вы ничего не можете поделать, чтобы исправить это, Fancybox использует атрибут для цели, для которой это не предназначено. В этом нет ничего плохого. Веб-страницы не должны быть 100% «действительными».

источник

2012-01-27 17:04:21

+1 не нужно быть пуристом;) – JFK

Вы можете что-то с этим сделать - см. Принятый ответ: http://stackoverflow.com/a/9037826/221381 –

Атрибут rel указывает связь между текущим документом и связанным документом. Атрибут имеет ограниченный набор возможных значений, перечисленных здесь: http://www.w3schools.com/tags/att_link_rel.asp. Использование нестандартного значения приведет к предупреждению о валидации, которое может быть исправлено только путем изменения атрибута rel на стандартное значение или вообще его удаления.

Я не совсем уверен, почему у вас есть атрибут там, однако есть несколько альтернатив, которые будут проверять правильно:

Если вы пытаетесь сохранить информацию в отношении каждого пункта и ваш веб-сайт использует доктайп HTML5 то вы можете использовать атрибут data- *. Пример использования: data-group = "1".Затем вы можете получить доступ к набору данных через javascript, см. Здесь: http://slides.html5rocks.com/#custom-data
Если вы пытаетесь получить доступ к элементам в селекторе css, вы можете добавить «group1» в качестве второго класса к элементам.
Если вы пытаетесь получить доступ к элементам с помощью JavaScript, и вы не используете доктрину XHTML, вы также можете рассмотреть вопрос об установке их атрибута имени на «group1», а затем с помощью функции getElementsByName ('group1').

источник

2012-01-27 17:17:25 lpd

Если вы все еще используете FancyBox v 1.x (который не поддерживают данные-FancyBox-группы), вы можете легко модифицировать скрипт немного.

Вам нужно только найти и заменить атрибут «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>

источник

2012-09-27 16:45:31

спасибо. сэкономить мое время. – gokhan

HTML атрибут REL ошибки с помощью FancyBox

ответ

Смежные вопросы