Facebook like image gallery with count of images

问题

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 .

回答1:

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

来源：https://stackoverflow.com/questions/48221269/facebook-like-image-gallery-with-count-of-images