You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
8.1 KiB
HTML
131 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>%%TITLE%%</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta charset="utf-8">
|
|
<link href="primer.css" rel="stylesheet">
|
|
<link href="fastgallery.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="bg-gray">
|
|
<div id="thumbnails">
|
|
<h1 class="mx-1 my-0 m-md-3 m-lg-4">%%TITLE%%</h1>
|
|
|
|
<!-- Thumbnail view. First subfolders, then media. -->
|
|
<div class="container-xl m-0 m-md-2 m-lg-3">
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3">
|
|
<a href="temp2">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/temp2/2018-10-14 15.59.20.jpg" alt="diipadaapa">
|
|
</a>
|
|
<span class="width-fit css-truncate css-truncate-target"><i data-feather="folder" width="15"
|
|
height="15"></i> temp2</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(0);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2018-03-31 16.48.28.jpg" alt="2018-03-31 16.48.28.jpg">
|
|
<span class="d-flex flex-justify-center width-fit css-truncate css-truncate-target">2018-03-31
|
|
16.48.28.jpg</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(1);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2018-07-16 17.28.12 -000.jpg" alt="2018-03-31 16.48.28.jpg">
|
|
<span class="width-fit css-truncate css-truncate-target">2018-07-16 17.28.12 -000.jpg</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(2);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2018-11-10 12.36.05.jpg" alt="2018-11-10 16.48.28.jpg">
|
|
<span class="width-fit css-truncate css-truncate-target">2018-07-16 17.28.12 -000.jpg</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(3);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2016-05-01 18.20.21.jpg" alt="2016-05-01 18.20.21.jpg">
|
|
<span class="width-fit css-truncate css-truncate-target">2016-05-01 18.20.21</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(0);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2018-03-31 16.48.28.jpg" alt="2018-03-31 16.48.28.jpg">
|
|
<span class="width-fit css-truncate css-truncate-target">2018-03-31 16.48.28.jpg</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(1);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2018-07-16 17.28.12 -000.jpg" alt="2018-03-31 16.48.28.jpg">
|
|
<span class="width-fit css-truncate css-truncate-target">2018-07-16 17.28.12 -000.jpg</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(2);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2018-11-10 12.36.05.jpg" alt="2018-11-10 16.48.28.jpg">
|
|
<span class="width-fit css-truncate css-truncate-target">2018-07-16 17.28.12 -000.jpg</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(3);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2016-05-01 18.20.21.jpg" alt="2016-05-01 18.20.21.jpg">
|
|
<span class="width-fit css-truncate css-truncate-target">2016-05-01 18.20.21</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(0);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2018-03-31 16.48.28.jpg" alt="2018-03-31 16.48.28.jpg">
|
|
<span class="width-fit css-truncate css-truncate-target">2018-03-31 16.48.28.jpg</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(1);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2018-07-16 17.28.12 -000.jpg" alt="2018-03-31 16.48.28.jpg">
|
|
<span class="width-fit css-truncate css-truncate-target">2018-07-16 17.28.12 -000.jpg</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(2);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2018-11-10 12.36.05.jpg" alt="2018-11-10 16.48.28.jpg">
|
|
<span class="width-fit css-truncate css-truncate-target">2018-07-16 17.28.12 -000.jpg</span>
|
|
</div>
|
|
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(3);displayModal(true);">
|
|
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2016-05-01 18.20.21.jpg" alt="2016-05-01 18.20.21.jpg">
|
|
<span class="width-fit css-truncate css-truncate-target">2016-05-01 18.20.21</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal which shows individual pictures full-screen.
|
|
Covers thumbnail view. Hidden by default, unless URL contains
|
|
hashtag and thumbnail name. -->
|
|
<div class="position-fixed top-0 left-0 width-full height-full d-flex flex-column flex-justify-center flex-items-center box border border-gray box-shadow bg-gray" id="modal" hidden>
|
|
<div class="bg-gray clearfix position-absolute top-0 p-1" id="modalHeader">
|
|
<div class="float-right modalControl float-left" onclick="displayModal(false);">
|
|
<i data-feather="x"></i>
|
|
</div>
|
|
<div class="float-right modalControl float-left">
|
|
<a href="#" id="modalDownload" download>
|
|
<i data-feather="download"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div id="modalMedia" class="d-flex flex-justify-center"></div>
|
|
<div class="bg-gray position-absolute bottom-0 d-flex flex-justify-center p-1" id="modalFooter">
|
|
<div class="float-left modalControl float-left" onclick="prevPicture();">
|
|
<i data-feather="chevron-left"></i>
|
|
</div>
|
|
<div class="mx-auto float-left width-fit css-truncate css-truncate-target" id="modalDescription"></div>
|
|
<div class="float-right modalControl float-left" onclick="nextPicture();">
|
|
<i data-feather="chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statically generated javascript array of pictures on this page -->
|
|
<script>
|
|
const pictures = [{
|
|
thumbnail: "_thumbnails/2018-03-31 16.48.28.jpg",
|
|
fullsize: "_pictures/2018-03-31 16.48.28.jpg",
|
|
original: "_original/2018-03-31 16.48.28.jpg"
|
|
}, {
|
|
thumbnail: "_thumbnails/2018-07-16 17.28.12 -000.jpg",
|
|
fullsize: "_pictures/2018-07-16 17.28.12 -000.mp4",
|
|
original: "_original/2018-07-16 17.28.12 -000.mp4"
|
|
}, {
|
|
thumbnail: "_thumbnails/2018-11-10 12.36.05.jpg",
|
|
fullsize: "_pictures/2018-11-10 12.36.05.jpg",
|
|
original: "_original/2018-11-10 12.36.05.jpg"
|
|
}, {
|
|
thumbnail: "_thumbnails/2016-05-01 18.20.21.jpg",
|
|
fullsize: "_pictures/2016-05-01 18.20.21.jpg",
|
|
original: "_original/2016-05-01 18.20.21.jpg"
|
|
}]
|
|
</script>
|
|
<script src="feather.min.js"></script>
|
|
<script>
|
|
feather.replace()
|
|
</script>
|
|
<script src="fastgallery.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |