Facebook 像图片库一样的图片库答案

【问题标题】：Facebook like image gallery with count of imagesFacebook 像图片库一样的图片库
【发布时间】：2018-01-12 07:11:16
【问题描述】：

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

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

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

之前我用过 Light Gallery

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

给出演示链接。我已经实现了它，它工作正常，但它最初会加载所有图像，否则画廊对 web 和移动都有好处。但我的要求是最初加载最小图像并使用图像查看器加载单个图像。

所以请参考一些图片负载最小的插件。

提前致谢。

【问题讨论】：

这个帖子似乎是 off-topic 根据 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是无关紧要的，因为它们往往会吸引自以为是的答案和垃圾邮件。
@Navaneetha Krishnan K 你能分享一下你是如何在图像中实现上述目标的吗？我从你分享的链接中看不到同样的东西

标签： jquery css html image-gallery

【解决方案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 风格，只显示几张图片，但有一个很大的画廊

【讨论】：