Проверка HTML 5 с REL - PullRequest
Новая
       35

Проверка HTML 5 с REL

2 голосов
/ 26 июля 2011

Я просмотрел вопрос, похожий на этот, но не смог найти именно то, что мне нужно, но извиняюсь, если на него где-то ответили.

Я начал использовать лайтбоксы java-скрипта на своей веб-страницедля отображения изображений и указывается разместить их по ссылкам: <a href="..." rel="lightbox"></a>

Это означает, что изображения теперь открываются в лайтбоксе, однако валидатор HTML 5 говорит, что «лайтбокс» явно не является разрешенным типом ссылки.

Как я могу связать необходимые ссылки с Java-скриптом лайтбокса, чтобы он проверил?

Заранее большое спасибо, матовый

Ответы [ 4 ]

6 голосов
/ 26 июля 2011

Или

  1. Игнорировать ошибки проверки (поскольку они не вызывают проблем) или

  2. Изменить с rel="lightbox" на что-то вроде data-lightbox="true". Любой атрибут, начинающийся с «data-», разрешен и допустим в HTML5.

0 голосов
/ 21 февраля 2014

, что помогло мне подтвердить это, основано на том, что было сказано выше:

Javascript 

function externalLinks() 
{
    if (!document.getElementsByTagName) return;
    var anchors = document.getElementsByTagName("a");

    for (var i=0; i<anchors.length; i++) 
    {
        var anchor = anchors[i];

        if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
        {
            anchor.target = "_blank";
        }

        if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "lightbox")
        {
            anchor.setAttribute('data-lightbox','lightbox');
        }
    }
}
window.onload = externalLinks;

HTML 

<a href='assets/newsTemplate/07_350wtd.jpg' rel='lightbox' title='DumbThumb'><img src='assets/newsTemplate/07_350wtd.jpg' alt='dumb'></img></a>
0 голосов
/ 01 октября 2013

Si lo solucione:

Modifico el html: 

<a href="img/2.jpg"  data-rel="lightbox" title="" >

Modifico el javascript: 

jQuery(function($) {
        $("a[data-rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
        });
    });
}
0 голосов
/ 10 ноября 2012

Ответ Мэтью работает, но вы должны также не забыть настроить исходный код лайтбокса.Пример такой модификации вы можете увидеть здесь: http://wasthere.com/lightbox2/js/custom-lightbox.js - это работает (вы можете увидеть здесь, например, http://wasthere.com/asia/en/show-entry/141/kerala---munnar-(india)), проверка HTML5 проходит.Проверьте комментарии в исходном файле выше, если вы решите использовать его - просто измените все атрибуты "rel", относящиеся к изображениям лайтбоксов, на "data-rel" на вашем сайте.

С уважением, Лукас

...