为什么Fancybox仅适用于图像的第一部分？

Question

我有一些HTML代码，可以显示9个带有花式框样式的图像。 我在标签之间复制了HTML代码，并为styles.css中的每个重复添加了唯一的ID。

但是，重复的节没有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>&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”是容器的ID-在您的情况下为“ section”块
• 紧随其后的“ a”（在“ $（“＃work a”）”函数调用中）是链接标记，您将在该标记上添加FancyBox行为。