jquery - Facebook 类似的图片库，包含图片数量

Question

大家好，我需要一个图片库 jquery 插件，它不应该在页面加载时最初加载所有图像。

例如:如果菜单有 25 个图像，我们应该只显示四个图像(+ 21 个以上)。这样就可以同时点击它了。它应该弹出 slider ，以便用户可以滑动并查看其余图像。

我已附上我的要求的示例图像。

之前我使用过Light Gallery

http://sachinchoolur.github.io/lightGallery/demos/

给出演示链接。我已经实现了它，它工作得很好，但是在这个过程中，它首先加载所有图像，否则图库对于网络和移动设备都有好处。但我的要求是最初加载最小图像并使用图像查看器加载单个图像。

所以请引用一些具有最小图像负载的插件。

提前致谢。

Answer 1

我认为你看起来像这样Demo示例代码为:

<div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">

                    <h3 id="hidden-elements">Hidden elements</h3>
                    <p>Facebook style, only show a few images but have a large gallery</p>
                    <div class="row justify-content-center" data-code="example-9">
                        <a href="https://unsplash.it/1200/768.jpg?image=263" data-toggle="lightbox" data-gallery="hidden-images" class="col-4">
                            <img src="https://unsplash.it/600.jpg?image=263" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=264" data-toggle="lightbox" data-gallery="hidden-images" class="col-4">
                            <img src="https://unsplash.it/600.jpg?image=264" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=265" data-toggle="lightbox" data-gallery="hidden-images" class="col-4">
                            <img src="https://unsplash.it/600.jpg?image=265" class="img-fluid">
                        </a>
                        <!-- elements not showing, use data-remote -->
                        <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=264" data-title="Hidden item 1"></div>
                        <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=265" data-title="Hidden item 3"></div>
                        <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=266" data-title="Hidden item 4"></div>
                        <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=267" data-title="Hidden item 5"></div>
                    </div>
                    <p class="footer"><span>Built by me, <a href="https://ashleyd.ws">ashleydw</a></span></p>
                </div>
            </div>
        </div>

它的工作方式类似于 Facebook 风格，只显示几张图片，但有一个很大的图库