#StackBounty: #foreach #advanced-custom-fields Show only first 9 images ACF Gallery and trigger gallery from link

Bounty: 50

I am trying to show the first 9 images as previews in an ACF gallery. When clicking one, a lightbox opens and I would like all the images, including the initial 9 to be included

I can only find solutions to show 1 image not more than 1

I tried this

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

but this only repeats the 9th image

I also tried this

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

But this doesn’t work at all

I would also like to create a button that just opens the gallery without showing any preview image

Essentially I want to trigger a click on the first image when clicking the ‘show gallery button’

Any help would be great

edit

I have just tried this:

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

 

And it successfully only previews 9, but the rest do not show in the lightbox

I tried this for the button click

jQuery ( function($) {
      $('.gallery-button').off('touchstart touchend').on('click', function() {
              $('.listing-preview-gallery #preview-image-container:first-child .the-image a').trigger('click');
      } );
    } );

Edit 2

It occurs to me I can use nth child to hide all but the first 9 thumbnails, but then it still loads the images – I wonder if there is a way to not load the remaining images until the lightbox is opened


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.