HTML-тег rel

Я пытаюсь проверить свой документ HTML5 с помощью w3c. Я использую плагин fancybox jQuery для простых световых коробов и галерей изображений. Чтобы различать каждую галерею изображений, я использую тег rel.

Когда я проверяю свою страницу, я получаю следующую ошибку:

Галерея неверных значений для атрибута rel элемента a: не абсолютный IRI. Коллекция строк не является зарегистрированным ключевым словом или абсолютным URL-адресом.

Вот мой код:

<div class="portItem">
    <div class="thumbs">
        <div class="items">
        <img src="images/rsl.jpg" class="col" alt="A website for R.S.Lynch and Company"/>
        <div class="caption">
            <a class="fancybox" rel="gallery1" href="images/rs1.jpg">R.S.Lynch & Company</a>
            <div class="hidden">
            <a class="fancybox" rel="gallery1" href="images/rs2.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs3.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs4.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs5.jpg"></a>
            </div>
        </div>
        </div>
    </div>
</div>

Есть ли лучший тег для использования и получения того же результата? Спасибо


validation html-validation
person Chris Frank    schedule 03.11.2012    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Я бы предложил использовать здесь атрибут data-family, например:

<a class="fancybox" data-gallery="1" href="images/rs1.jpg">R.S.Lynch & Company</a>
<a class="fancybox" data-gallery="1" href="images/rs2.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs3.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs4.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs5.jpg">...</a>

... поскольку этот тип атрибута был разработан специально для прикрепления некоторых данных к элементам DOM. На мой взгляд, это более семантично, чем использование class.

Вы можете легко получить доступ к этим значениям с помощью синтаксиса $('some selector').data('gallery').

Что касается атрибута rel, похоже, что в HTML5 он ограничен набором предопределенных атрибуты и используются для определения более высокоуровневых отношений между документами.

person raina77ow    schedule 03.11.2012
comment
Спасибо :) Это мне очень помогло. - person Chris Frank; 04.11.2012
comment
отлично, спасибо! Мне пришлось изменить rel-код плагина jcarousel, который я использовал, но после этого он заработал как шарм! И я использовал data-slide для своих конкретных целей. - person Tiffany Israel; 02.01.2013

arrow_upward
0
arrow_downward

Вместо этого вы можете добавить класс для каждой галереи: class="fancybox gallery1"

person Jamey Sharp    schedule 03.11.2012

arrow_upward
-1
arrow_downward 

<a class="fancybox" data-gallery="1" href="images/img1.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/img2.jpg">...</a>

$(".fancybox").attr('rel', 'галерея данных').fancybox();

person Василь Русановський    schedule 23.03.2015
comment
Пожалуйста, прокомментируйте свой ответ. - person ivan.mylyanyk; 23.03.2015