ACF Gallery缩略图（包括图片）

Question

我正在努力实现以下图片：

基本上，我已经设置了ACF图库，并使用了以下代码：

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

现在列出图库中的所有图像。我正在寻找的是第一张全尺寸的图像，其他3张图像是缩略图，如图像，点击后，更改全尺寸图像。

有人有什么想法吗？

编辑：

我愿意接受另一种方式

Answer 1

通常我不会发布所有这些，因为它需要创建很多东西，但幸运的是我昨天做了类似的工作。

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

在此示例中，“gallery-full”是为大型照片设置的自定义图像尺寸，“gallery-thumb”是为我的缩略图设置的自定义图像尺寸。

缩略图有一个应用于它们的属性，称为“picURL”，它包含大图像的URL。大图像使用第一张图像的URL自动填充。然后，使用jQuery，当单击一个拇指时，它会使用缩略图“picURL”的值更改大图像的 src 值。

它还为当前缩略图提供了一个“活动”类，以便为您当前的拇指设置样式。