仅显示前 9 个图像 ACF 库和链接中的触发器库
Posted
技术标签:
【中文标题】仅显示前 9 个图像 ACF 库和链接中的触发器库【英文标题】：Show only first 9 images ACF Gallery and trigger gallery from link 【发布时间】：2021-09-24 18:21:27 【问题描述】：我正在尝试将前 9 张图像显示为 ACF 库中的预览。单击一个时，会打开一个灯箱，我希望包含所有图像，包括最初的 9 个
我只能找到显示 1 张图片不超过 1 张的解决方案
我试过了
<?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'] ); ?>" />
</a>
<p><?php echo esc_html( $image['caption'] ); ?></p>
<?php endforeach; ?>
<?php endif; ?>
但这只会重复第 9 张图片
我也试过了
<?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'] ); ?>" />
</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'] ); ?>" />
</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'] ); ?>" />
</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'] ); ?>" />
</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'] ); ?>" />
</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'] ); ?>" />
</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'] ); ?>" />
</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'] ); ?>" />
</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'] ); ?>" />
</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'] ); ?>" />
</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
我突然想到我可以使用 nth child 隐藏除前 9 个缩略图之外的所有缩略图，但它仍然会加载图像 - 我想知道是否有办法在打开灯箱之前不加载剩余的图像
【问题讨论】：
【参考方案1】：所以我没有你完整问题的答案，但你的 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'] ); ?>" />
</a>
</div>
</div>
<?php
endforeach;
endif; ?>
</div>
您只需将 $previewCount 变量设置为您要预览的任意数量的图像，剩下的工作由代码完成。它使用 $i 作为计数器，并检查 $previewCount 变量以确定何时停止循环遍历 $gallery_images。
【讨论】：
抱歉耽搁了 - 这工作完美，除了剩余的图像在打开时没有显示在灯箱中。有没有办法做到这一点？以上是关于仅显示前 9 个图像 ACF 库和链接中的触发器库的主要内容，如果未能解决你的问题，请参考以下文章