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上运行，我做了这样的设置

主页
Schilderingen
- 工作1（此处只有一项工作，包含信息）
- 工作2（等）
- 工作3
Tekeningen
- 工作1
- 工作2
- 工作3

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

有人知道如何解决这个问题，每张图片都有效。

提前致谢！

Answer 1

我不确定Featherlight库是如何工作的，但它可能与HTML ID有关。您可以将每个ID仅使用一次，但是您复制了ID＆＃34; mylightbox＆＃34;对于foreach中的每个图像。

尝试将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>"; 
  }
}

灯箱仅显示第一张图片

1 个答案: