Lightbox only show's first image

Question

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!

Answer 1

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