為什么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行為。