灯箱只显示第一张图片 [英] Lightbox only show's first image

问题描述

我目前正在使用lightbox制作网站。 （ 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
  $ b
  
  
  • 工作1工作，与信息）
  
  
  • 工作2（等）
  
  
  • 工作3
  
  


• Tekeningen
  
  
  
  
  • 工作1
  
  
  • 工作2
  
  
  • 工作3
  
  

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

有人有任何想法如何解决这个问题，每个单一的图像工作。

预先感谢！

解决方案

我不确定Featherlight库的工作原理，但它可能与HTML标识。您可以让每个ID只使用一次，但是您为每个图像在foreach中重复使用idmylightbox。

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

I'm currently working on a website with a lightbox. (Featherlight)

Now the problem is, the lightbox only load's the first image, even when I click on another image, it still show's the first.

You can try it yourself over here

The code I used is

<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> 

The site runs on ProcessWire, I made a setup like this

• Home
• Schilderingen
  • Work 1 (Here just one work, with the information)
  • Work 2 (etc)
  • Work 3
• Tekeningen
  • Work 1
  • Work 2
  • Work 3

So there is no going left or right, just that one single image that has to popup.

Does someone have any idea how to fix this, that each single image works.

Thanks in advance!

解决方案

I am not sure how exactly Featherlight library works, but it is probably connected with HTML IDs. You can have each id used only once, but you duplicate id "mylightbox" for every image in foreach.

Try to change the foreach to something like this:

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

这篇关于灯箱只显示第一张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！