Different Styling for Last Thumbnail in Advance Custom Fields Pro Gallery

Question

I've created an image gallery using Advance Custom Fields pro with lighbox and limited it to show only 4 thumbnails, and that's working perfectly. When someone click on any thumbnail, the gallery opens up in lightbox and shows all the images in it.

Now I want to use different css styling for the 4th thumbnail but don't know how to do that.

Here's my code:

<?php
            $images = get_field('menu_gallery');
            $image_1 = $images[0];
            if( $images ) { ?>
            <ul class="gal-grid">
                
                <?php
                $i = 0;
                
                foreach( $images as $image ) {
                    
                    if ($i >= 5) {
                        $content = '<li class="gal-grid-zom">';
                        $content = '<a class="gallery_image" href="'. $image['url'] .'"></a>';
                        $content .= '</li>';
                    } else {
                        $content = '<li class="gal-grid">';
                        $content = '<li class="gal-grid"><a class="gallery_image" href="'. $image['url'] .'">';
                        $content .= '<img class="gallery-zom" src="'. $image['sizes']['thumbnail'] .'" alt="'. $image['alt'] .'" />';
                        $content .= '</a>';

                        $i++;
                    }
                    $content .= '</li>';
                    if ( function_exists('slb_activate') ) {
                        $content = slb_activate($content);
                    }

                    echo $content;
                    ?>
                <?php } ?>
            <?php } ?>  </ul>

Can someone help me regarding this issue?

Answer 1

You can add the $key inside your foreach loop :

foreach( $images as $key => $image ) {
  if( $key === 3 ) {
     // it will show the specific <li> for the 4th iteration.
     <li class="fourth-grid">The Image</li>
  } else {
     <li class="gal-grid">The image</li>
  }
}