ACF Gallery thumbnails (image included)

Question

I am trying to achieve the below image:

Basically, I have set up ACF Gallery, and used the code below:

<?php $images = get_field('gallery'); if( $images ): ?> <!-- This is the gallery filed slug -->
  <?php foreach( $images as $image ): ?> <!-- This is your image loop -->
    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> <!-- Image Code -->
  <?php endforeach; ?> <!-- This is where the image loop ends -->
<?php endif; ?> <!-- This is where the gallery loop ends -->

Which now lists all the images in the gallery. What I am looking for, is the first image to be full size, and the other 3 images to be thumbnails, like the image, which when clicked, change the full size image.

Anyone have any ideas?

EDIT:

Im open to another way of doing this

Answer 1

Normally I wouldn't post all of this, as it would require creating a lot of stuff, but luckily I just made something similar for work yesterday.

<?php $galleryImages = get_field('gallery'); ?>
<div id="largeGalleryImage">
    <img src="<?php echo $galleryImages[0]['sizes']['gallery-full']; ?>" id="galleryImageLarge" />
</div>
<div id="galleryThumbs">
        <?php $i = 0;
        foreach($galleryImages as $galleryThumb){
                $i++;
                if($i==1){
                        $imgClass = 'active';   
                }else{
                        $imgClass = '';   
                }
                echo '<img src="'.$galleryThumb['sizes']['gallery-thumb'].'" class="imageThumb imageNum'.$i.' '.$imgClass.'" picURL="'.$galleryThumb['sizes']['gallery-full'].'" />';
        } ?>    
</div>
<script type="text/javascript">
    //Setup Gallery Clicks
    $("#galleryThumbs .imageThumb").click(function () {
            if ($(this).hasClass('active')) {
                    //do nothing
            } else {
                    var newImage = $(this).attr('picURL');
                    $('#galleryImageLarge').attr('src', newImage);
                    $("#galleryThumbs .imageThumb").removeClass('active');
                    $(this).addClass('active');
            }
    });
</script>

In this example, "gallery-full" is a set custom image size for the large photo, and "gallery-thumb" is a set custom image size for my thumbnails.

The thumbnails have an attribute applied to them, called "picURL" and it houses the URL of the large image. The large image is auto-filled with the URL of the first image. Then, using jQuery, when a thumb is clicked, it changes the src value of the large image with the value of the thumbnail's "picURL".

It also gives the current thumbnail an "active" class, to allow for styling your current thumb.