144 lines
4.3 KiB
Plaintext
144 lines
4.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{{ info['title'] }}</title>
|
|
<link rel="icon" href="../favicon.ico" />
|
|
</head>
|
|
<body>
|
|
<link rel="stylesheet" href="../style.css" />
|
|
<div id="galleryContainer" class="galleryContainer">
|
|
<div class="toolbar">
|
|
<button onclick="prevImage()">Previous</button>
|
|
<button onclick="imageNewTab()">Open Full Size</button>
|
|
<button onclick="delGallery()">Exit</button>
|
|
<button onclick="nextImage()">Next</button>
|
|
</div>
|
|
<img id="galleryImage" class="galleryImage">
|
|
</div>
|
|
<div class="mainBody">
|
|
<a class="indexlink" href="../">
|
|
<!-- <img src="../icons8-home.png"> -->
|
|
Home
|
|
</a>
|
|
<!-- <br> -->
|
|
<div class="locationDisplay">
|
|
<span class="locationTitle">{{ info['title'] }}</span>
|
|
<span class="locationState">{{ info['state'] }}</span>
|
|
</div>
|
|
<div class="headerImageContainer">
|
|
<a target="_blank" href="{{ info['cover'] }}">
|
|
<img id="headerImage" class="headerImage" src="/cover/cover_{{ info['cover'] }}">
|
|
</a>
|
|
</div>
|
|
<div class="postBody">
|
|
{{ markdown }}
|
|
</div>
|
|
<h3 class="photoCount">{{ count }} photos</h3>
|
|
<div class="allphotos">
|
|
{% for width, height, photo in photos %}
|
|
<a id="{{ photo }}" class="previewLink" onclick="javascript:enlargeImage('{{ photo }}');return false;" href="{{ photo }}" target="_blank">
|
|
<img width="{{ width }}" height="{{ height }}" id="{{ photo }}" class="preview" src="/thumbnail/thumbnail_{{ photo }}">
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<script>
|
|
viewState = null;
|
|
// jank here for getting photos during html templating
|
|
photos = JSON.parse('{{ photos_json }}');
|
|
galleryContainer = document.getElementById("galleryContainer");
|
|
galleryImage = document.getElementById("galleryImage");
|
|
previewLinks = document.getElementsByClassName("previewLink");
|
|
headerImage = document.getElementById("headerImage");
|
|
|
|
function enlargeImage (filename) {
|
|
viewState = photos.indexOf(filename);
|
|
galleryImage.fullRes = filename;
|
|
galleryImage.src = "/compressed/compressed_" + filename;
|
|
galleryContainer.style.display = "block";
|
|
headerImage.style.rotate = "none";
|
|
};
|
|
|
|
function delGallery () {
|
|
galleryContainer.style.display = "none";
|
|
galleryImage.src = "";
|
|
headerImage.style.rotate = "-3deg";
|
|
};
|
|
|
|
function nextImage () {
|
|
viewState++;
|
|
if (viewState == previewLinks.length) {
|
|
viewState = 0;
|
|
};
|
|
galleryImage.fullRes = photos[viewState];
|
|
galleryImage.src = "/compressed/compressed_" + photos[viewState];
|
|
};
|
|
|
|
function prevImage () {
|
|
viewState--;
|
|
if (viewState == -1) {
|
|
viewState = previewLinks.length - 1;
|
|
};
|
|
galleryImage.fullRes = photos[viewState];
|
|
galleryImage.src = "/compressed/compressed_" + photos[viewState];
|
|
};
|
|
|
|
function imageNewTab () {
|
|
window.open(galleryImage.fullRes, "_blank")
|
|
};
|
|
|
|
function dragHandler (event) {
|
|
|
|
};
|
|
|
|
function keyHandler (event) {
|
|
if (event.key == "ArrowRight" | event.key == "Space") {
|
|
nextImage();
|
|
} else if (event.key == "ArrowLeft") {
|
|
prevImage();
|
|
} else if (event.key == "Escape" | event.key == "q") {
|
|
delGallery();
|
|
}
|
|
};
|
|
|
|
function clickHandler (event) {
|
|
if (event.target.id == "galleryContainer") {
|
|
delGallery();
|
|
} else if (event.target.id == "galleryImage") {
|
|
if (event.clientX > window.innerWidth / 2) {
|
|
nextImage();
|
|
} else {
|
|
prevImage();
|
|
};
|
|
};
|
|
};
|
|
|
|
// last_pointerx = NaN
|
|
// function onDown (event) {
|
|
// // console.log(event);
|
|
// last_pointerx = event.x;
|
|
// };
|
|
|
|
// function onUp (event) {
|
|
// if (event.x > last_pointerx) {
|
|
|
|
// }
|
|
// if (last_pointerx > event.x + 50) {
|
|
// prevImage();
|
|
// } else {
|
|
// nextImage();
|
|
// };
|
|
// };
|
|
|
|
document.onkeydown = keyHandler;
|
|
document.body.onclick = clickHandler;
|
|
// galleryImage.addEventListener("touchstart", onDown);
|
|
// galleryImage.addEventListener("touchend", onUp);
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|