1
0
Fork 0
mirror of https://github.com/alangrainger/immich-public-proxy.git synced 2025-01-23 16:02:43 +01:00

lightGallery preload images doesn't work with infinite scrolling

This commit is contained in:
Alan Grainger 2025-01-13 14:49:18 +08:00
parent 309c8cc0ce
commit 200fb8848e
2 changed files with 30 additions and 5 deletions
app

View file

@ -1,8 +1,11 @@
// How many thumbnails to load per "page" fetched from Immich
const PER_PAGE = 50
class LGallery {
items
lightGallery
element
index = 0
index = PER_PAGE
/**
* Create a lightGallery instance and populate it with the first page of gallery items
@ -56,11 +59,10 @@ class LGallery {
* https://www.lightgalleryjs.com/demos/infinite-scrolling/
*/
loadMoreItems () {
const numberOfItems = 80
if (this.index < this.items.length) {
// Append new thumbnails
this.items
.slice(this.index, this.index + numberOfItems)
.slice(this.index, this.index + PER_PAGE)
.forEach(item => {
if (item.video) {
this.element.insertAdjacentHTML('beforeend', `<a data-video='${item.video}'
@ -72,7 +74,7 @@ class LGallery {
<img alt="" src="${item.thumbnailUrl}"/></a>`)
}
})
this.index += numberOfItems
this.index += PER_PAGE
this.lightGallery.refresh()
}
}

View file

@ -24,7 +24,30 @@
</div>
<% } %>
</div>
<div id="lightgallery"></div>
<div id="lightgallery">
<%
// Load the first 50 thumbnails, then load more as the user scrolls. See web.js
items.slice(0, 50).forEach(item => {
if (item.video) { %>
<a data-video='<%- item.video %>'
<% if (item.downloadUrl) { %>
data-download-url="<%- item.downloadUrl %>"
<% } %>
>
<img alt="" src="<%- item.thumbnailUrl %>"/>
<div class="play-icon"></div>
</a>
<% } else { %>
<a href="<%- item.previewUrl %>"
<% if (item.downloadUrl) { %>
data-download-url="<%- item.downloadUrl %>"
<% } %>
>
<img alt="" src="<%- item.thumbnailUrl %>"/>
</a>
<% }
}) %>
</div>
<script src="/share/static/web.js"></script>
<script src="/share/static/lg/lightgallery.min.js"></script>
<script src="/share/static/lg/lg-fullscreen.min.js"></script>