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

#jquery #html #css #fancybox

#jquery #HTML #css #fancybox

Вопрос:

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

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

Это первые несколько строк кода каждого раздела. Каждый дублированный раздел отличается только тем, что «work» — это «work1», «work2» и т.д. Я предполагаю, что где-то в этих сопроводительных файлах 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>amp;nbsp;amp;rarr;  
    </span></a></figcaption>
    </figure>

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

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

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

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

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

Ответ №1:

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

 $("#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»
за ним (в вызове функции ‘$(«#work a»)’) следует тег link, к которому вы добавляете поведение FancyBox.