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

А проблема заключается в том, что 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 – это и есть название группы.