灯箱只显示第一张图片

Question

我目前正在开发一个带有灯箱的网站。 (Featherlight)

现在的问题是，灯箱只加载第一张图片，即使我点击另一张图片，它仍然显示第一张。

我使用的代码是

<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>"; 
  }
}

灯箱只显示第一张图片

Lightbox only show's first image

html

javascript

css

featherlight.js