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

我有一些HTML代码，它显示9个带有fancybox样式的图像。 我在标签之间复制了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>

我只更改代码中的“work”属性。工作1等

我理解你在每个#work标记中添加代码的意思，但是#work、#work1等仅出现在styles.css中，其他任何文件中都没有

我试着插入那个代码，但似乎没什么关系。我认为根本的问题是，我甚至找不到fancybox在“工作”块上的初始化位置。如果我能找到，我会加上其他的

我将代码插入上述两个代码示例之间，如下所示：

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

$（“#工作2 a”）.fancybox（）；

您需要在希望具有此行为的所有链接（…）标记上初始化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”）”函数调用中）是link标记，您将在其上添加FancyBox行为

---

您应该更新您的代码示例，以包含您正在谈论的这些链接和图像…事后注意事项。我发现原因是“rel”标签。将它们全部更改为rel=work。成功了。