Show only first 9 images ACF Gallery and trigger gallery from link - foreach

Question

I am trying to show the first 9 images as previews in an ACF gallery. When clicking one, a lightbox opens and I would like all the images, including the initial 9 to be included
I can only find solutions to show 1 image not more than 1
I tried this
<?php $images = get_field( 'gallery' ); ?>
<?php $image = $images[9]; ?>
<?php if ( $images ) : ?>
<?php foreach ( $images as $gallery_image ): ?>
<a href="<?php echo esc_url( $image['url'] ); ?>">
<img src="<?php echo esc_url( $image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
</a>
<p><?php echo esc_html( $image['caption'] ); ?></p>
<?php endforeach; ?>
<?php endif; ?>
but this only repeats the 9th image
I also tried this
<?php if ( $gallery_images ) : ?>
<?php foreach(array_slice($gallery_images,0,9) as $gallery_image) ?>
<a href="<?php echo esc_url( $image['url'] ); ?>">
<img src="<?php echo esc_url( $image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
</a>
<p><?php echo esc_html( $image['caption'] ); ?></p>
<?php endforeach; ?>
<?php endif; ?>
But this doesn't work at all
I would also like to create a button that just opens the gallery without showing any preview image
Essentially I want to trigger a click on the first image when clicking the 'show gallery button'
Any help would be great
edit
I have just tried this:
<div class="listing-preview-gallery">
<?php $gallery_images = get_field( 'gallery' ); ?>
<?php if ( $gallery_images ) : ?>
<?php foreach ( $gallery_images as $gallery_image ): ?>
<?php if ( $i == 1 ) { ?>
<div class="preview-image-container">
<div class="the-image">
<a href="<?php echo esc_url( $gallery_image['url'] ); ?>">
<img src="<?php echo esc_url( $gallery_image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $gallery_image['alt'] ); ?>" />
</a>
</div>
</div>
<?php } elseif ( $i == 2 ) { ?>
<div class="preview-image-container">
<div class="the-image">
<a href="<?php echo esc_url( $gallery_image['url'] ); ?>">
<img src="<?php echo esc_url( $gallery_image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $gallery_image['alt'] ); ?>" />
</a>
</div>
</div>
<?php } elseif ( $i == 3 ) { ?>
<div class="preview-image-container">
<div class="the-image">
<a href="<?php echo esc_url( $gallery_image['url'] ); ?>">
<img src="<?php echo esc_url( $gallery_image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $gallery_image['alt'] ); ?>" />
</a>
</div>
</div>
<?php } elseif ( $i == 4 ) { ?>
<div class="preview-image-container">
<div class="the-image">
<a href="<?php echo esc_url( $gallery_image['url'] ); ?>">
<img src="<?php echo esc_url( $gallery_image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $gallery_image['alt'] ); ?>" />
</a>
</div>
</div>
<?php } elseif ( $i == 5 ) { ?>
<div class="preview-image-container">
<div class="the-image">
<a href="<?php echo esc_url( $gallery_image['url'] ); ?>">
<img src="<?php echo esc_url( $gallery_image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $gallery_image['alt'] ); ?>" />
</a>
</div>
</div>
<?php } elseif ( $i == 6 ) { ?>
<div class="preview-image-container">
<div class="the-image">
<a href="<?php echo esc_url( $gallery_image['url'] ); ?>">
<img src="<?php echo esc_url( $gallery_image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $gallery_image['alt'] ); ?>" />
</a>
</div>
</div>
<?php } elseif ( $i == 7 ) { ?>
<div class="preview-image-container">
<div class="the-image">
<a href="<?php echo esc_url( $gallery_image['url'] ); ?>">
<img src="<?php echo esc_url( $gallery_image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $gallery_image['alt'] ); ?>" />
</a>
</div>
</div>
<?php } elseif ( $i == 8 ) { ?>
<div class="preview-image-container">
<div class="the-image">
<a href="<?php echo esc_url( $gallery_image['url'] ); ?>">
<img src="<?php echo esc_url( $gallery_image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $gallery_image['alt'] ); ?>" />
</a>
</div>
</div>
<?php } elseif ( $i == 9 ) { ?>
<div class="preview-image-container">
<div class="the-image">
<a href="<?php echo esc_url( $gallery_image['url'] ); ?>">
<img src="<?php echo esc_url( $gallery_image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $gallery_image['alt'] ); ?>" />
</a>
</div>
</div>
<?php }
$i++; ?>
<?php endforeach; ?>
<?php endif; ?>
</div>
And it successfully only previews 9, but the rest do not show in the lightbox
I tried this for the button click
jQuery ( function($) {
$('.gallery-button').off('touchstart touchend').on('click', function() {
$('.listing-preview-gallery #preview-image-container:first-child .the-image a').trigger('click');
} );
} );
Edit 2
It occurs to me I can use nth child to hide all but the first 9 thumbnails, but then it still loads the images - I wonder if there is a way to not load the remaining images until the lightbox is opened

Answer 1

So I don't have the answer to your full question, but your php example to show the first 9 photos, there's a MUCH shorter way to write that out. Take a look at the code below.
<div class="listing-preview-gallery">
<?php $gallery_images = get_field( 'gallery' );
if ( $gallery_images ) :
$previewCount = 9;
$i = 0;
foreach ( $gallery_images as $gallery_image ):
$i++;
if($i <= $previewCount){ ?>
<div class="preview-image-container">
<div class="the-image">
<a href="<?php echo esc_url( $gallery_image['url'] ); ?>">
<img src="<?php echo esc_url( $gallery_image['sizes']['medium'] ); ?>" alt="<?php echo esc_attr( $gallery_image['alt'] ); ?>" />
</a>
</div>
</div>
<?php }
endforeach;
endif; ?>
</div>
You would just set the $previewCount variable to whatever number of images you want to preview, and the code will do the rest. It uses $i as a counter, and checks against the $previewCount variable to determine when to stop looping through the $gallery_images.