nyymix/muistox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add slideshow

Browse source
This commit is contained in:
Nyymix 2025-04-21 22:30:47 +03:00
parent 47b543bbb3
commit 38fa9ddf3f
4 changed files with 97 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

9
gallery/templates/gallery/photo_detail.html
View file

@ -88,7 +88,10 @@
<div><a href="{{ photo.photo.url }}">{{ photo.width }}x{{ photo.height }}</a></div>
</div>
<div class="uk-grid-small" uk-grid>
<button id="like-button" class="uk-button uk-button-primary">
<a href="{% url 'gallery:photo_slideshow_url' photo.album.slug photo.slug %}" class="uk-button uk-button-secondary" target="_blank" rel="noopener">
<span uk-icon="icon: play"></span> <span>Slideshow</span>
</a>
<button id="like-button" class="uk-button uk-button-secondary">
<span id="heart-icon" uk-icon="icon: heart"></span> <span id="like-text">Like</span>
</button>
</div>
@ -157,7 +160,7 @@
if (data.status === "liked") {
likeText.innerText = "Unlike";
heartIcon.setAttribute("style", "color: red");
heartIcon.setAttribute("style", "color: inherit");
} else {
likeText.innerText = "Like";
heartIcon.setAttribute("style", "color: inherit");
@ -171,7 +174,7 @@
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('like-text').innerText = "Unlike";
document.getElementById('heart-icon').setAttribute("style", "color: red");
document.getElementById('heart-icon').setAttribute("style", "color: inherit");
});
</script>
{% endif %}

52
gallery/templates/gallery/photo_slideshow.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ site_config.site_head_description }}">
<title>{{ site_config.site_head_title }} : Slideshow : {{ photo.album.name }}</title>
{% if next_photo %}
<meta http-equiv="refresh" content="5; url={% url 'gallery:photo_slideshow_url' next_photo.album.slug next_photo.slug %}" />
{% endif %}
<style>
body {
background-color: #000;
margin: 0;
}
.slideshow-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
img {
height: 100vh;
width: auto;
max-width: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="slideshow-container">
<a href="{{ photo.get_absolute_url }}">
<img
src="{{ photo.photo_md.url }}"
srcset="
{{ photo.photo_sm.url }} 320w,
{{ photo.photo_md.url }} 720w,
{{ photo.photo_bg.url }} 1920w,
{{ photo.photo.url }} 2560w
"
sizes="(max-width: 640px) 320px,
(max-width: 960px) 720px,
(max-width: 1920px) 1920px,
2560px"
alt="{{ photo.album.name }} - {{ photo.slug }}"
class="uk-display-block uk-margin-auto"
style="max-width: 100%; max-height: 90vh; object-fit: contain;" />
</a>
</div>
</body>
</html>