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

Question

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

但是，重复的部分没有 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 中，而没有出现在任何其他文件中。

我尝试插入该代码，但它似乎并不重要。我认为根本问题是我什至找不到在“工作” block 上初始化 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” block
• 后面的“a”(在“$("#work a")”函数调用中)是链接标记，您要在其上添加 FancyBox 行为。