如何解决仅显示前 9 张图像 ACF 图库并从链接触发图库
我正在尝试将前 9 张图像显示为 ACF 图库中的预览。单击一个时，会打开一个灯箱，我希望包含所有图像，包括最初的 9 个图像
我试过了
<?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; ?>
但这只会重复第 9 张图片
我也试过这个
<?PHP if ( $gallery_images ) : ?>
<?PHP foreach(array_slice($gallery_images,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; ?>
但这根本行不通
任何帮助都会很棒
编辑
我刚刚试过这个：
<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>
而且它只成功预览了 9 个，其余的没有显示在灯箱中
我试过这个按钮点击
jQuery ( function($) {
$('.gallery-button').off('touchstart touchend').on('click',function() {
$('.listing-preview-gallery #preview-image-container:first-child .the-image a').trigger('click');
} );
} );
编辑 2
我发现我可以使用第 n 个子节点隐藏除前 9 个缩略图之外的所有缩略图，但它仍然加载图像 - 我想知道是否有办法在打开灯箱之前不加载剩余图像
解决方法
所以我没有你的完整问题的答案，但是你的 php 示例显示了前 9 张照片，有一个更短的方法来写出来。看看下面的代码。
<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>
您只需将 $previewCount 变量设置为您想要预览的任意数量的图像，其余的将由代码完成。它使用 $i 作为计数器，并检查 $previewCount 变量以确定何时停止循环遍历 $gallery_images。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
