javascript - 灯箱只显示第一张图片

Question

我目前正在开发一个带有灯箱的网站。 ( 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

所以没有向左或向右移动，只有一个必须弹出的图像。

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

提前致谢!

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