仅显示前 9 个图像 ACF 库和链接中的触发器库

Question

我正在尝试将前 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'] ); ?>" 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,0,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

我突然想到我可以使用 nth child 隐藏除前 9 个缩略图之外的所有缩略图，但它仍然会加载图像 - 我想知道是否有办法在打开灯箱之前不加载剩余的图像

Answer 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'] ); ?>" alt="<?php echo esc_attr( $gallery_image['alt'] ); ?>" />
              </a>
          </div>
        </div>
      <?php }
    endforeach;
  endif; ?>
</div> 

您只需将 $previewCount 变量设置为您要预览的任意数量的图像，剩下的工作由代码完成。它使用 $i 作为计数器，并检查 $previewCount 变量以确定何时停止循环遍历 $gallery_images。