Commander1024/lostplaces-backend
1
0
Fork 0
Code Issues 14 Pull Requests Releases Wiki Activity

rudimentary implementation of a lightbox

Browse Source
This commit is contained in:
reverend
2021-04-03 23:03:44 +02:00
parent 092b91825f
commit ceeae9e8c9
3 changed files with 92 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
django_lostplaces/lostplaces/templates/partials/placeImageGrid.html
View File

@@ -1,4 +1,5 @@
{% load static %}
{% load lostplaces %}
{% if headline %}
<h1 class="LP-Headline">{{headline}}</h1>
@@ -6,8 +7,9 @@
<div class="LP-ImageGrid">
<ul class="LP-ImageGrid__Container">
{% for image in image_list %}
<li class="LP-ImageGrid__Item">
{% include 'partials/image.html' with source_url=image.filename.thumbnail.url link_url=image.filename.large.url %}
<li id="thumbnail{{forloop.counter}}" class="LP-ImageGrid__Item">
{{ "#image"|add:forloop.counter }}
{% include 'partials/image.html' with source_url=image.filename.thumbnail.url link_url="#image"|addstr:forloop.counter %}
{% if user.explorer == image.submitted_by%}
<span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
<a href="{% url 'place_image_delete' pk=image.id %}" class="LP-Link">
@@ -15,6 +17,20 @@
</a>
</span>
{% endif %}
<div id="image{{forloop.counter}}" class="LP-ImageGrid__LightBox">
<img class="LP-ImageGrid__FullSizeImage" src="{{image.filename.large.url}}" loading="lazy"/>
{% if forloop.counter < image_list|length %}
<a href="#image{{forloop.counter|add:1}}" class="LP-ImageGrid__Next">Next</a>
{% endif %}
{% if forloop.counter > 1 %}
<a href="#image{{forloop.counter|add:-1}}" class="LP-ImageGrid__Previous">Previous</a>
{% endif %}
<span class="LP-ImageGrid__Close LP-ImageGrid__DeleteItem" title="Schließen">
<a href="#thumbnail{{forloop.counter}}" class="LP-Link">
<img class="LP-Icon" src="{% static 'icons/cancel.svg' %}"/>
</a>
</span>
</div>
</li>
{% endfor %}
</ul>