Блог

Я пытаюсь показать первые 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

Мне приходит в голову, что я могу использовать 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.