Onkel-Werner-Freizeiten/CampOrganizer2
1
1
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity

slide of thumbnails experiments

Browse Source
This commit is contained in:
jotty
2025-05-31 10:25:38 +02:00
parent 485a222be4
commit 4c32a12d2d
5 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/main/resources/static/css/style.css
View File

@ -526,4 +526,11 @@ div {
.hoverlink:hover {
color: #0d6efd;
text-decoration: underline;
}
.thumbswipe {
-webkit-overflow-scrolling: touch;
max-height: 100px;
overflow-x: auto;
overflow-y: hidden;
}

14
src/main/resources/templates/allgemeines.html
View File

@ -23,12 +23,14 @@
<div class="col-12 center mb-3">
<a href="#" onclick="$('#fotoblock').fadeOut(1000); $('#welcomeblock').slideDown('slow');" class="btn btn-outline-secondary"><i class="fas fa-arrow-up"></i>&nbsp;Startseite</a>
</div>
<div class="col-12" style="max-height: 100px; overflow: auto">
<th:block th:each="n : ${#numbers.sequence(1, 85)}" th:with="i=${#strings.toString(n < 10 ? '0' + n : n)}">
<a th:href="'https://www.onkelwernerfreizeiten.de/stock/stock' + ${i} + '.jpg'" data-fancybox="gallery" th:data-caption="${title['stock' + i]}">
<img th:src="'https://www.onkelwernerfreizeiten.de/stock/thumb_stock' + ${i} + '.jpg'" height="96px" class="m-1" th:title="${title['stock' + i]}" />
</a>
</th:block>
<div class="col-12 thumbswipe">
<div style="min-width: 13000px"><!-- omits line break -->
<th:block th:each="n : ${#numbers.sequence(1, 85)}" th:with="i=${#strings.toString(n < 10 ? '0' + n : n)}">
<a th:href="'https://www.onkelwernerfreizeiten.de/stock/stock' + ${i} + '.jpg'" data-fancybox="gallery" th:data-caption="${title['stock' + i]}">
<img th:src="'https://www.onkelwernerfreizeiten.de/stock/thumb_stock' + ${i} + '.jpg'" height="96px" class="m-1" th:title="${title['stock' + i]}" />
</a>
</th:block>
</div>
<script th:inline="javascript">
Fancybox.bind('[data-fancybox="gallery"]', {
});