Fancybox2: изменение вызова для нескольких галерей

Question

Я генерирую HTML-страницу, содержащую несколько галерей из информации, хранящейся в базе данных MySQL, и мне нужно изменить вызов Fancybox2 следующим образом

$(document).ready(function() {
    $("a[rel=gall24],a[rel=gall30], etc, etc etc").fancybox({ ... });
});

Как добавить ссылки на элемент к вызову?То есть мне нужно добавить переменную с номером a[rel=XXX] к вызову.

Создать ли переменную со значениями и ссылкой на нее в вызове?Если это так, я не уверен в синтаксисе и был бы признателен за пример.

Answer 1

Вы можете использовать один скрипт, например:

$(document).ready(function() {
    $("a.fancybox").fancybox();
});

Затем, когда вы создаете свои галереи, просто добавьте различный атрибут rel для каждой галереи, но тот же class="fancybox", например ::

<!--gallery 01 -->
<a class="fancybox" href="images/01.jpg" rel="gallery01">image 01</a>
<a class="fancybox" href="images/02.jpg" rel="gallery01">image 02</a>
<a class="fancybox" href="images/03.jpg" rel="gallery01">image 03</a>

<!--gallery 02 -->
<a class="fancybox" href="images/04.jpg" rel="gallery02">image 04</a>
<a class="fancybox" href="images/05.jpg" rel="gallery02">image 05</a>
<a class="fancybox" href="images/06.jpg" rel="gallery02">image 06</a>

При нажатии на любое изображение (например, изображение 01) в галерее (Fancybox) будут отображаться только те элементы с таким же атрибутом rel (изображения 02 и 03, как в примере выше + изображение 01, конечно)

В fancybox v2.x вам не нужно использовать jQuery live(), как предлагает @sczizzo, поскольку fancybox v2.x уже поддерживает как существующие, так и динамически добавленные элементы

Последнее замечание : не используйте идентификаторы для более чем одного элемента. Идентификаторы должны быть уникальными, и вы не должны использовать один и тот же идентификатор дважды или более раз в одном и том же HTML-документе. Проверьте http://fancyapps.com/fancybox/#support FAQ № 6 для более

Answer 2

Почему бы вам просто не позвонить fancybox() несколько раз? Вы можете сохранить параметры, которые вы передаете, и использовать их позже.

С другой стороны, вы можете также использовать класс вместо a[rel=XYZ] селекторов, что я и сделал бы:

$('a.gallery').fancybox({ ... });

Если контент загружается динамически (например, через Ajax), вы можете сделать что-то подобное, используя jQuery's live().