javascript - 灯箱广告仅显示第一张图片

我目前正在使用带有灯箱的网站。 （Featherlight）

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

You can try it yourself over here

我使用的代码是

<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



因此，没有必要向左或向右移动，只需弹出一个图像即可。

有人知道如何解决此问题吗？每个图像都能工作。

提前致谢！

最佳答案

我不确定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>";
  }
}