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); background: rgba(0, 0, 0, 0.8);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column;
} }
.lightbox img { .lightbox img {
max-width: 90%; max-width: 90%;
@ -41,31 +42,66 @@
color: white; color: white;
cursor: pointer; 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> </style>
</head> </head>
<body> <body>
<h1>Image Archive</h1> <h1>Image Archive</h1>
<div class="gallery"> <div class="gallery">
{% for image in images %} {% 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 %} {% endfor %}
</div> </div>
<!-- Lightbox --> <!-- Lightbox -->
<div class="lightbox" id="lightbox"> <div class="lightbox" id="lightbox">
<span class="close" onclick="closeLightbox()">&times;</span> <span class="close" onclick="closeLightbox()">&times;</span>
<span class="arrow left" onclick="prevImage()">&#10094;</span>
<img id="lightbox-img" src=""> <img id="lightbox-img" src="">
<span class="arrow right" onclick="nextImage()">&#10095;</span>
</div> </div>
<script> <script>
function openLightbox(src) { let images = [
document.getElementById("lightbox-img").src = src; {% 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"; document.getElementById("lightbox").style.display = "flex";
} }
function closeLightbox() { function closeLightbox() {
document.getElementById("lightbox").style.display = "none"; 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> </script>
</body> </body>
</html> </html>