Facebook 喜欢带有图像数量的图像库

Question

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

例如：如果菜单有 25 张图片，我们应该只显示四张图片（+ 21 更多）。这样在点击它的同时。它应该弹出滑块，以便用户可以滑动并查看其余图像。

我附上了我的要求的示例图片。

之前我用过Light Gallery

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

给定 Link 进行演示。我已经实现了它工作正常，但在此它最初加载所有图像，否则画廊对网络和移动设备都有好处。但我的要求是最初加载最小图像并使用图像查看器加载单个图像。

所以请参考一些图片加载最少的插件。

提前致谢。

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 风格一样工作，只显示几张图片，但有一个大图库

Facebook 喜欢带有图像数量的图像库

Facebook like image gallery with count of images

html

css

jquery

image-gallery