Показать изображения галереи в один ряд

Question

Согласно моему предыдущему закрытому вопросу Отображение изображений в одной строке, скрытие всех остальных

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

Я работаю над пользовательской темой Wordpress и имеют стандартный лайтбокс галереи:

Мой клиент хочет отредактировать галерею в этой форме:

Все элементы должны отображаться в одну строку, три столбца, а в последнем окне должно отображаться количество оставшихся элементов в галерее, а после щелчка по ним отображаться их ... (я не знаю, если в сетка или что-то еще) Я действительно понятия не имею, как это сделать. Я ничего не нашел во всей сети. Помогите мне с некоторыми советами и не закрывайте этот вопрос!

Answer 1

Во-первых, вы не должны повторно открывать / повторно задавать вопросы только потому, что они закрыты, особенно если вы не собираетесь предоставлять более подробную информацию. Это хороший способ построить плохую связь.

Тем не менее, то, что вы хотите, довольно просто. Просто посчитайте элементы в вашем массиве $images. Если оно превышает 2, добавьте поддельный предмет, который имеет количество «всего изображений - 2». Добавьте к нему событие JavaScript onclick, которое удалит поддельный элемент, и покажите следующие скрытые элементы. Просто используйте класс hidden для любого элемента после третьего. Это самый простой c способ достичь того, что вы ищете. Вы также можете загружать их динамически с помощью ajax, модных анимаций и т. Д. c. Но это выходит за рамки этого вопроса.

PHP:

<div class="container mt-5">
    <div class="row">
    <?php
        if( $images = get_field( 'galeria' ) ){
            for( $i = 0, $n = count($images); $i < $n; $i++ ){ ?>
                <?php if( $i == 2 ){ ?>
                    <div class="col-12 col-sm-6 col-md-4" onclick="showRemainingImages(this,event);">
                        <?php
                            $remaining = $n - 2;
                            echo "+{$remaining} Images";
                        ?>
                        <p><?php echo $image['caption']; ?></p>
                    </div>
                <?php } ?>
                <div class="col-12 col-sm-6 col-md-4 <?php echo ($i>1)?'hidden':''; ?>">
                        <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 }
        }
    ?>
    </div>
</div>

JS:

<script>
    function showRemainingImages(el,e){
        e.preventDefault();
        var container = el.closest('.container');
        var hidden    = container.querySelectorAll('.hidden');

        if( hidden.length > 0 ){
            hidden.forEach(function(col){
                col.classList.remove('hidden');
            });
        }

        el.remove();
    }
</script>

CSS:

<style>
    .hidden { display: none; }
</style>

Вот быстрый кодекс, который я смоделировал. Обратите внимание, что структура HTML немного отличается, у меня есть собственная сетка под рукой, но вы должны быть в состоянии понять ее. https://codepen.io/xhynk/pen/zYxLBZG