Lightbox Only Show's First Image

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

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