Валидация FancyBox

Валидация FancyBox

Мне неизвестно почему, но разработчик замечательного оформления изображений для Web – FancyBox, не особо бдит за стандартами W3C и этот факт не позволяет успешно пройти тест на валидность html.

По-моему мнению, на таком серьезном проекте, как FancyBox, такое просто недопустимо. Ведь новые версии браузеров разрабатываются с оглядкой на эти стандарты и кто его знает, как поведет себя FancyBox в Будущем, лет, эдак, через 5.

В чем, собственно, проблема?

А проблема заключается в том, что fancyBox по умолчанию использует параметр rel для ссылок, свободные значения которого не прописаны в стандарте. У этого параметра только несколько значений, которые строго прописаны и использовать какие-то другие воспрещается.

Можно было бы закрыть глаза на это, но есть бдительные глаза заказчиков и конкурентов, которые не оставят место таким, на мой взгляд, глупым ошибкам.

Давайте попытаемся убрать эти ошибки.

Вообще рынок создания сайтов Рязань очень обширен и конкуренция на нем огромная. Нужно создавать сайты на голову выше своих конкурентов и люди к Вам потянутся.

Успешная валидация FancyBox

Использование параметра rel необходимо только для указания группировки нескольких изображений в группу. Если у мне на каждой странице необходимо использовать FancyBox только для вывода одиночных изображений, то проблема решается самим собой – удалением этого параметра. Но если мне все таки нужно группировать изображения между собой, то я использую приведенный html-код ниже:

<script type="text/javascript">
$(document).ready(function(){
    var boxen = [];
    $("a[class^=fancybox]").each(function() {
        if ($.inArray($(this).attr('class'),boxen)) boxen.push($(this).attr('class'));
    });
    $(boxen).each(function(i,val) { $('a[class='+val+']').attr('rel',val).fancybox({
		fitToView		: false,
		padding		: '0'
}); });
});
</script>

Код размещается в любой части html-страницы. Обычно его размещают в тегах HEAD, но стандарт разрешает делать это где угодно. Поэтому не суть важно.

Работа этого кода до безобразия проста. Вместо того, чтобы указывать название группы изображений в параметре rel, нужно это делать в class, после fancybox-….

Для вывода изображений, используется код:

<a href="/images/4.png" class="fancybox-362">
	<img src="/images/4t.png" alt="" />
</a>
<a href="/images/5.png" class="fancybox-362">
	<img src="/images/5t.png" alt="" />
</a>
<a href="/images/6.png" class="fancybox-362">
	<img src="/images/6t.png" alt="" />
</a>

В моем случае 362 – это и есть название группы.

Комментарии:

  1. Сергей опубликовал комментарий 30 Январь 2013, 13:25 #

    можно так… html5 валидация проходится
    $(’.ddd’).fancybox( { ‘groupAttr’: ‘data-type’ });

    | Ответить
  2. александр опубликовал комментарий 5 Ноябрь 2014, 12:32 #

    не помогает мне скриптик, код:

    class=“ngg-fancybox” rel=“184b911eded034e511767b876ae4daa5” ><img title=“водопад из камня” alt=“водопад из камня” src=“http://kievrem.com.ua/wp-content/gallery/works-landshaft/thumbs/thumbs_Скибин-2-2.jpg” width=“100” height=“75” ваш скрипт вставляю в header.php между тегами head, правильно? Помогите.
    | Ответить
Имя
e-mail
Сайт
Текст комментария: