CODEWITHSUNDEEP
javascripthtmlcssfeatherlight.js
YouGo
YouGo

Reputation: 69

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

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!

Upvotes: 0

Views: 775

Answers (1)

Ondra Koupil
Ondra Koupil

Reputation: 1073

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

Upvotes: 1

Related Questions