Facebook喜欢带有图片数量的图片库 [英] Facebook like image gallery with count of images

问题描述

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

例如:如果菜单中有25张图像，则我们应仅显示4张图像(另需+ 21张).因此，在单击它时.它应随滑块一起弹出，以便用户可以滑动并查看其余图像.

我已附上我的要求的示例图片.

我以前使用过Light Gallery

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

给出演示链接.我已经实现了它可以正常工作，但是在此过程中它首先加载了所有图像，否则图库对于Web和移动设备都非常有用.但是我的要求是首先加载最小的图像，并使用图像查看器加载单个图像.

所以请使用一些图片最少的插件.

谢谢.

解决方案

我认为您看起来像这样

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

Hi all I need a image gallery jquery plugin , which it should not load all the images initially when page loads.

For ex : If the menu has 25 images , we should display only four images with (+ 21 more ). So that while clicking on it . It should pop up with slider so that the user can slide and view the rest of images .

I have attached sample images of my requirement .

Earlier I've used Light Gallery

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

Given Link for demo. I have implemented this it is working fine , But in this it loads all the image initially otherwise gallery is good for both web and mobile .But My requirement is loading minimum image inititally and load individual image with image viewer .

so please refer some plugin with minimum load of images .

Thanks in advance .

解决方案

I think you are looking like this Demo Sample code is:

<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>

It works like Facebook style, only show a few images but have a large gallery

这篇关于Facebook喜欢带有图片数量的图片库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！