ACF 图库缩略图（含图片）

Question

我正在尝试实现下图：

基本上，我已经设置了ACF Gallery，并使用了下面的代码：

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

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

<?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，当单击缩略图时，它会将大图像的 src 值更改为缩略图的 "picURL".[=11= 的值]

它还为当前缩略图提供 "active" class，以便为您当前的缩略图设置样式。

ACF 图库缩略图（含图片）

ACF Gallery thumbnails (image included)

css

php

wordpress

plugins

advanced-custom-fields