search

miromannino / Justified-Gallery

Javascript library to help creating high quality justified galleries of images. Used by thousands of websites as well as the photography community 500px.
http://miromannino.github.io/Justified-Gallery/
MIT License
1.68k stars 298 forks source link

How to "fill" the screen with thumbnails, but not more rows... #391

Closed Offerel closed 1 month ago

Offerel commented 1 month ago

To have the gallery load fast, I send currently only x amount of images to the gallery via php. If the user reaches the bottom, I send a xhttp request for the next batch of images and so on. This works fine so far, as long there is a scrollbar where the user can scroll to the bottom. Its identical to https://miromannino.github.io/Justified-Gallery/endless-scroll/

But when a user has a really big monitor, the defined initial image count is to small to fill the screen with thumbnails, the scrollbar is not available and the user can't scroll to trigger the xhttp request.

How can I load so much pictures, that it fills the screen, but not more. Enough to make the scrollbar available, to trigger the xhttp request?

Offerel commented 1 month ago

It seems, i have found a way, to at workaround what i want:

$('#images').justifiedGallery().on('jg.complete', function(e) {
    if(e.currentTarget.clientHeight > 100 && e.currentTarget.clientHeight < document.documentElement.clientWidth) {
        // load next batch of images
    }
});

There is a jg.complete event. It fires, when the gallery is completed. Now i check the height of the computed gallery and compare it to the available viewport. If it gallery height is lower as the viewport, the scrollbars are missing. At this point, i load the next x photos from the backend. Additionally, I added a 100 pixel "grace" height, which is used when a gallery has zero photos, in that case, it doesn't make sense to load the next photos.

Maybe this is helpful for others, with the same issue.