Question

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

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

我附上了我的要求的样本图片。

早些时候我使用过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风格类似，只显示一些图片，但有一个大型图库

Facebook就像带图像数量的图片库

1 个答案: