fancybox - не загружать скрытые изображения

Ваше решение может быть намного проще:

Оберните все ваши якоря в скрытом div вместо этого скрывая их по отдельности и удалите <img> со всех скрытых привязок, тем самым вы не загружаете какое-либо (большое) изображение, независимо от того, видимо или нет:

Основная фотография:

<li><a id="some_id" class="grouped_elements" rel="some_rel" href="some_href"><img src=""></a></li>

Скрытые фотографии

<div style="display:none">
    <a id="some_id" class="grouped_elements" rel="some_rel" href="some_href"></a>
    <a id="some_id" class="grouped_elements" rel="some_rel" href="some_href"></a>
    ... etc.
</div>

Обратите внимание, что вам даже не нужно обертывать их внутри <li> и этот div можно поместить в любом месте документа и вне элемента <ul>.

Два дополнительных комментария:

1. Убедитесь, что вы не повторяете один и тот же идентификатор в нескольких элементах. Идентификаторы должны быть уникальными в одном документе. Если вы хотите манипулировать несколькими элементами, используя один и тот же селектор в одном документе, вместо этого используйте классы.

2. Убедитесь, что вы используете измененные изображения для ваших эскизов (<img>); повторная калибровка большого изображения, чтобы выглядеть маленьким, как миниатюра через css или html, не является (как правило) хорошей идеей.