<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Archive</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 10px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 5px;
cursor: pointer;
}
/* Lightbox styles */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
flex-direction: column;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
border-radius: 5px;
}
.lightbox .close {
position: absolute;
top: 20px;
right: 30px;
font-size: 30px;
color: white;
cursor: pointer;
}
.arrow {
position: absolute;
top: 50%;
font-size: 40px;
color: white;
cursor: pointer;
user-select: none;
transform: translateY(-50%);
}
.arrow.left {
left: 20px;
}
.arrow.right {
right: 20px;
}
</style>
</head>
<body>
<h1>Image Archive</h1>
<div class="gallery">
{% for image in images %}
<img src="{{ url_for('images', filename=image) }}" alt="Image" onclick="openLightbox({{ loop.index0 }})">
{% endfor %}
</div>
<!-- Lightbox -->
<div class="lightbox" id="lightbox">
<span class="close" onclick="closeLightbox()">×</span>
<span class="arrow left" onclick="prevImage()">❮</span>
<img id="lightbox-img" src="">
<span class="arrow right" onclick="nextImage()">❯</span>
</div>
<script>
let images = [
{% for image in images %}
"{{ url_for('images', filename=image) }}",
{% endfor %}
];
let currentIndex = 0;
function openLightbox(index) {
currentIndex = index;
document.getElementById("lightbox-img").src = images[currentIndex];
document.getElementById("lightbox").style.display = "flex";
}
function closeLightbox() {
document.getElementById("lightbox").style.display = "none";
}
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
document.getElementById("lightbox-img").src = images[currentIndex];
}
function prevImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
document.getElementById("lightbox-img").src = images[currentIndex];
}
</script>
</body>
</html>