adebaumann/labhelper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Images on detail page now show up as thumbnails with lightbox functionality

Browse Source
This commit is contained in:
Adrian A. Baumann
2026-01-06 14:54:56 +01:00
parent 384c0d58e6
commit 0602347539
1 changed files with 87 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
boxes/templates/boxes/thing_detail.html
View File

@@ -92,11 +92,24 @@
</div> </div>
<div style="display: flex; flex-direction: column; gap: 10px;"> <div style="display: flex; flex-direction: column; gap: 10px;">
{% for file in thing.files.all %} {% for file in thing.files.all %}
{% if file.filename|lower|slice:"-4:" == '.jpg' or file.filename|lower|slice:"-5:" == '.jpeg' or file.filename|lower|slice:"-4:" == '.png' or file.filename|lower|slice:"-5:" == '.webp' or file.filename|lower|slice:"-4:" == '.gif' or file.filename|lower|slice:"-4:" == '.svg' or file.filename|lower|slice:"-4:" == '.bmp' or file.filename|lower|slice:"-5:" == '.tiff' or file.filename|lower|slice:"-4:" == '.ico' %}
{% thumbnail file.file "200x200" crop="center" as thumb %}
<div style="display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border:1px solid #e9ecef;">
<img class="lightbox-trigger" data-url="{{ file.file.url }}" src="{{ thumb.url }}" alt="{{ file.title }}" style="width: 60px; height: 60px; object-fit: cover; border-radius: 6px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
<div style="flex-grow: 1;">
<a href="{{ file.file.url }}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 500; font-size: 15px;">{{ file.title }}</a>
<span style="color: #999; font-size: 12px;">({{ file.filename }})</span>
</div>
<i class="fas fa-expand lightbox-trigger" data-url="{{ file.file.url }}" style="color: #999; font-size: 14px; cursor: pointer;"></i>
</div>
{% endthumbnail %}
{% else %}
<div style="display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;"> <div style="display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
<i class="fas fa-paperclip" style="color: #667eea; font-size: 16px;"></i> <i class="fas fa-paperclip" style="color: #667eea; font-size: 16px;"></i>
<a href="{{ file.file.url }}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 500; font-size: 15px;">{{ file.title }}</a> <a href="{{ file.file.url }}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 500; font-size: 15px;">{{ file.title }}</a>
<span style="color: #999; font-size: 12px;">({{ file.filename }})</span> <span style="color: #999; font-size: 12px;">({{ file.filename }})</span>
</div> </div>
{% endif %}
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
@@ -120,6 +133,39 @@
</div> </div>
</div> </div>
</div> </div>
<div class="lightbox" id="lightbox">
<span class="lightbox-close">&times;</span>
<img id="lightbox-image" src="" alt="">
</div>
{% endblock %}
{% block extra_js %}
<script>
$(document).ready(function() {
$('.lightbox-trigger').on('click', function(e) {
e.preventDefault();
const imageUrl = $(this).data('url');
$('#lightbox-image').attr('src', imageUrl);
$('#lightbox').addClass('active');
$('body').css('overflow', 'hidden');
});
$('#lightbox').on('click', function(e) {
if (e.target === this || e.target.classList.contains('lightbox-close')) {
$('#lightbox').removeClass('active');
$('body').css('overflow', 'auto');
}
});
$(document).on('keydown', function(e) {
if (e.key === 'Escape') {
$('#lightbox').removeClass('active');
$('body').css('overflow', 'auto');
}
});
});
</script>
{% endblock %} {% endblock %}
{% block extra_css %} {% block extra_css %}
@@ -198,5 +244,46 @@
border-top: 2px solid #e0e0e0; border-top: 2px solid #e0e0e0;
margin: 1.5em 0; margin: 1.5em 0;
} }
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
justify-content: center;
align-items: center;
cursor: zoom-out;
}
.lightbox.active {
display: flex;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 40px;
cursor: pointer;
z-index: 10000;
transition: opacity 0.2s;
}
.lightbox-close:hover {
opacity: 0.7;
}
</style> </style>
{% endblock %} {% endblock %}