Почему Fancybox работает только для первого раздела изображений?

Question

У меня есть HTML-код, который отображает 9 изображений со стилями fancybox.Я продублировал HTML-код между тегами и добавил уникальный идентификатор для каждого дублирования в styles.css.

Однако в дублированных разделах не работает fancybox.

Это первыйнесколько строк кода каждого раздела.Каждый дублированный раздел отличается только тем, что «работа» - это «работа1», «работа2» и т. Д. Я предполагаю, что где-то в этих сопроводительных файлах js, fancybox.js или fancybox.css есть другой атрибут.Но я просмотрел эти файлы и не нашел ничего общего с HTML и styles.css.

 <section class="clearfix" id="work" name="work">
    <header>
    <h2>Graphic Design</h2>
    </header>
    <ul class="projects list">

fancybox должен быть инициализирован, я думаю, следующими строками:

    <li><figure><a href="images/pricing_table_3.jpg" rel="work"><img     
    src="images/work_img.jpg" alt="Image" /></a>
    <figcaption><a href="http://website.com/">Visit Livesite<span>&nbsp;&rarr;  
    </span></a></figcaption>
    </figure>

Я только изменяю атрибут "работа" в этом коде.work1 и т. д.

Я понимаю, что вы имеете в виду, добавляя этот код к каждому тегу #work, но #work, # work1 и т. д. появляются только в styles.css и нигде в других файлах.

Я попытался вставить этот код, и это, похоже, не имело значения.Я думаю, что основная проблема заключается в том, что я даже не могу найти, где инициализируется fancybox в блоке 'работа'.Если бы я мог найти это, я бы добавил другие.

Я вставил код между двумя приведенными выше примерами кода, например так:

 <script type="text/javascript">
 $("#work2 a").fancybox();
 </script>          

Answer 1

Вам нужно инициализировать FancyBox для всех тегов ссылки (...), для которых вы хотите иметь такое поведение. Пример:

$("#work a").fancybox();   // initialize fancybox on "work" block
$("#work1 a").fancybox();  // initialize fancybox on "work1" block
$("#work2 a").fancybox();  // initialize fancybox on "work2" block

Описание:

• "# work" - это идентификатор контейнера - в вашем случае блок "section"
• "a" после него (в вызове функции '$ ("# work a") ") является тегом ссылки, для которого вы добавляете поведение FancyBox.