燈箱廣告僅顯示第一張圖片

Question

我目前正在使用帶有燈箱的網站。 （ 羽毛燈 ）

現在的問題是，燈箱僅加載第一張圖片，即使我單擊另一張圖片，它仍然顯示第一張圖片。

您可以在這里自己嘗試

我使用的代碼是

<div class="grid-sizer"></div>
    <?php if($page->numChildren(true)) {
        echo "<ul class='project'>";
        foreach($page->children as $child) {

            if ($child->head_image) {
                $image = $child->head_image;  
                echo "<li class='item'><a href='#' data-featherlight='#mylightbox'><img id='mylightbox' src='{$image->url}' class='image'></a><p class='worktitle'>$child->title</p></li>"; 
                                }}  

                echo "</ul>";}
        ?>
    </div> 

該站點在ProcessWire上運行，我進行了這樣的設置

• 家
• 希爾德林根
  • 作品1（這里只有一件作品，附有信息）
  • 工作2（等）
  • 工作3
• 特寧根
  • 工作1
  • 工作2
  • 工作3

因此，沒有必要向左或向右移動，只需彈出一個圖像即可。

有人知道如何解決這個問題嗎？每個圖像都能工作。

提前致謝！

Answer 1

我不確定Featherlight庫的工作原理如何，但是它可能與HTML ID有關。 每個ID只能使用一次，但是您要為foreach中的每個圖像復制ID“ mylightbox”。

嘗試將foreach更改為以下內容：

foreach($page->children as $childIndex => $child) {
  if ($child->head_image) {
    $image = $child->head_image;  
    echo "<li class='item'><a href='#' data-featherlight='#mylightbox" . $childIndex . "'><img id='mylightbox" . $childIndex . "' src='{$image->url}' class='image'></a><p class='worktitle'>$child->title</p></li>"; 
  }
}