Wordpress Lightbox Issue

Question

I am having an issue with a lightbox i can't seem to put my finger on. When the light box opens, it loads the post/page as the first slide instead of the image in the gallery. I am also getting an invalid argument on a foreach statement inside the code block that doesn't make sense.

I want the lightbox being called from a button click and it opens but shows the page as first slide.

When gallery is display on page lightbox opens correctly.

See example here https://catm27.sg-host.com/horse/etro-pa/

Any help appreciated

<?php $gallery = get_field('images')[0]; ?>
   <?php if ($gallery) : ?>
      <a href="#" class="gallery_trigger btn btn-primary" data-toggle="lightbox" data-gallery="gallery-<?php the_ID(); ?>">Gallery</a>
             <div class="hidden gallery">
                  <?php foreach ($gallery['images'] as $image) : ?>    
                         <a href="<?php echo esc_url($image['url'])  ?>" class="noo-lightbox-item" data-gallery="gallery-<?php the_ID(); ?>">
                          <img src="<?php echo isset($image['sizes']['thumbnail']) ? esc_url($image['sizes']['thumbnail']) : esc_url($image['url']); ?>" alt="<?php echo isset($image['alt']) ? $image['alt'] : ''; ?>"/>
                            </a>
                  <?php endforeach; ?>
             </div>
  <?php endif; ?>

Answer 1

Here's a revised code, you should try

<?php 
$gallery = get_field('images');
if ($gallery && is_array($gallery)) :
    $first_gallery_item = $gallery[0];
?>
    <a href="#" class="gallery_trigger btn btn-primary" data-toggle="lightbox" data-gallery="gallery-<?php the_ID(); ?>">Gallery</a>
    <div class="hidden gallery">
        <?php foreach ($first_gallery_item['images'] as $image) : ?>    
            <a href="<?php echo esc_url($image['url'])  ?>" class="noo-lightbox-item" data-gallery="gallery-<?php the_ID(); ?>">
                <img src="<?php echo isset($image['sizes']['thumbnail']) ? esc_url($image['sizes']['thumbnail']) : esc_url($image['url']); ?>" alt="<?php echo isset($image['alt']) ? $image['alt'] : ''; ?>"/>
            </a>
        <?php endforeach; ?>
    </div>
<?php endif; ?>