mirror of
https://github.com/alangrainger/immich-public-proxy.git
synced 2025-01-23 16:02:43 +01:00
#51 lightGallery preload images doesn't work with infinite scrolling
This commit is contained in:
parent
309c8cc0ce
commit
200fb8848e
2 changed files with 30 additions and 5 deletions
app
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue