Display images in one row, hide all others [closed

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 5 days ago.

I'm working on custom Wordpress theme and have standard gallery lightbox:

My client want to edit gallery to this form:

All items should be displayed in one row, three colums and the last window should display count of remaining items in gallery, and after click on it display them...(I don't know if in grid or something elses) I really have no idea how to do this. I found nothing on entire web.

<div class="container mt-5">
    <div class="row">

    <?php
    $images = get_field( 'galeria' );

    if ( $images ) :
        foreach ( $images as $image ) : ?>

                <div class="col-12 col-sm-6 col-md-4">
                    <a href="<?php echo $image['url']; ?>" data-fancybox="gallery">
                         <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" class="d-block mx-auto">
                    </a>
                    <p><?php echo $image['caption']; ?></p>
                </div>

        <?php endforeach; 
    endif; ?>

    </div>                      
</div>