jquery - 在一行中显示图库图像

Question

根据我之前关闭的问题 Display images in one row, hide all others

<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，则添加一个计数为“total images - 2”的假元素。向其添加一个 JavaScript onclick 事件，该事件将删除假元素，并显示以下隐藏元素。只需在第三个之后的任何元素上使用 hidden 类。这是实现所需内容的最基本方法。您还可以通过 ajax、花哨的动画等动态加载它们。但这超出了这个问题的范围。

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