Karl/ai-frame-image-server
1
0
Fork 0
mirror of https://github.com/karl0ss/ai_image_frame_server.git synced 2025-04-28 11:13:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

arrow cycle

Browse Source
This commit is contained in:
Karl Hudgell 2025-04-01 16:51:43 +01:00
parent 6cc30bd2d0
commit 342416a68d
1 changed files with 39 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
templates/gallery.html
View File

@ -27,6 +27,7 @@
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
flex-direction: column;
}
.lightbox img {
max-width: 90%;
@ -41,31 +42,66 @@
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(this.src)">
<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()">&times;</span>
<span class="arrow left" onclick="prevImage()">&#10094;</span>
<img id="lightbox-img" src="">
<span class="arrow right" onclick="nextImage()">&#10095;</span>
</div>
<script>
function openLightbox(src) {
document.getElementById("lightbox-img").src = src;
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>