2024-10-28 20:47:14 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
2024-10-29 10:49:54 +01:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
2024-10-28 20:47:14 +01:00
|
|
|
<title>Gallery</title>
|
|
|
|
<link type="text/css" rel="stylesheet" href="/style.css"/>
|
|
|
|
<link type="text/css" rel="stylesheet" href="/lightgallery-bundle.min.css"/>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="lightgallery">
|
2024-10-29 10:29:14 +01:00
|
|
|
<% items.forEach(item => {
|
|
|
|
if (item.video) { %>
|
|
|
|
<a data-video='<%- item.video %>'>
|
|
|
|
<img alt="" src="<%- item.thumbnailUrl %>"/>
|
|
|
|
<div class="play-icon"></div>
|
2024-10-28 20:47:14 +01:00
|
|
|
</a>
|
2024-10-29 10:29:14 +01:00
|
|
|
<% } else { %>
|
|
|
|
<a href="<%- item.originalUrl %>">
|
|
|
|
<img alt="" src="<%- item.thumbnailUrl %>"/>
|
|
|
|
</a>
|
|
|
|
<% }
|
|
|
|
}) %>
|
2024-10-28 20:47:14 +01:00
|
|
|
</div>
|
|
|
|
<script src="/lightgallery.min.js"></script>
|
2024-10-29 10:49:54 +01:00
|
|
|
<script src="/lg-fullscreen.min.js"></script>
|
2024-10-28 20:47:14 +01:00
|
|
|
<script src="/lg-thumbnail.min.js"></script>
|
2024-10-29 10:29:14 +01:00
|
|
|
<script src="/lg-video.min.js"></script>
|
2024-10-28 20:47:14 +01:00
|
|
|
<script src="/lg-zoom.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
lightGallery(document.getElementById('lightgallery'), {
|
2024-10-29 10:49:54 +01:00
|
|
|
plugins: [lgZoom, lgThumbnail, lgVideo, lgFullscreen],
|
2024-10-30 08:41:04 +01:00
|
|
|
licenseKey: '8FFA6495-676C4D30-8BFC54B6-4D0A6CEC',
|
2024-10-28 20:47:14 +01:00
|
|
|
speed: 500
|
2024-10-29 10:29:14 +01:00
|
|
|
})
|
|
|
|
<% if (openItem) { %>
|
|
|
|
const openItem = <%- openItem %>
|
|
|
|
const thumbs = document.querySelectorAll('#lightgallery a')
|
|
|
|
if (thumbs.length >= openItem) {
|
|
|
|
thumbs[openItem - 1].click()
|
|
|
|
}
|
|
|
|
<% } %>
|
2024-10-28 20:47:14 +01:00
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|