Frontend mockup part-way done
Toni Melisma
4 years ago
parent
9965f8cad3
commit
e6ffc853e3
@ -0,0 +1,114 @@
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#modal {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
|
||||
/* TODO add nicer gray colors, dependency to thumbnail background color */
|
||||
|
||||
#modalPicture {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
/* TODO add hover and click animations for modal buttons, cursor: pointer etc */
|
||||
|
||||
.modalClose {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
right: 0%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modalPrev {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modalNext {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modalClose:hover,
|
||||
.modalClose:focus,
|
||||
.modalPrev:hover,
|
||||
.modalPrev:focus,
|
||||
.modalNext:hover,
|
||||
.modalNext:focus {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
div.folder {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
/*font-size: 0;*/
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img.folder {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
div.image {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
/*font-size: 0;*/
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img.image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
span.image {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
/*img.preload {
|
||||
display: none
|
||||
}*/
|
||||
|
||||
span {
|
||||
font-size: 0.8em;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>%%TITLE%%</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="gogallery.css">
|
||||
<!-- <script src="gogallery.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="folders">
|
||||
<!-- TODO -->
|
||||
<a href="temp2">
|
||||
<div class="folder">
|
||||
<img src="_thumbnails/temp2/2018-10-14 15.59.20.jpg" alt="diipadaapa" class="folder">
|
||||
<img src="_thumbnails/temp2/2018-11-25 20.59.17.jpg" alt="diipadaapa" class="folder">
|
||||
<img src="_thumbnails/temp2/2018-11-25 20.59.21.jpg" alt="diipadaapa" class="folder">
|
||||
<img src="_thumbnails/temp2/2018-11-25 20.59.46.jpg" alt="diipadaapa" class="folder">
|
||||
<span>temp2</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="images">
|
||||
<div class="image" onclick="changePicture(0);displayModal(true);">
|
||||
<img src="_thumbnails/2018-03-31 16.48.28.jpg" alt="2018-03-31 16.48.28.jpg" class="image">
|
||||
<span class="image">2018-03-31 16.48.28.jpg</span>
|
||||
</div>
|
||||
<div class="image" onclick="changePicture(1);displayModal(true);">
|
||||
<img src="_thumbnails/2018-07-16 17.28.12 -000.jpg" alt="2018-03-31 16.48.28.jpg" class="image">
|
||||
<span class="image">2018-07-16 17.28.12 -000.jpg</span>
|
||||
</div>
|
||||
<div class="image" onclick="changePicture(2);displayModal(true);">
|
||||
<img src="_thumbnails/2018-11-10 12.36.05.jpg" alt="2018-11-10 16.48.28.jpg" class="image">
|
||||
<span class="image">2018-07-16 17.28.12 -000.jpg</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TODO make modal navigation way smaller and nicer looking -->
|
||||
<div id="modal">
|
||||
<div class="modalClose" onclick="displayModal(false);">
|
||||
<svg width="100" height="100">
|
||||
<polygon points="15,25 25,15 50,40 75,15 85,25 60,50 85,75 75,85 50,60 25,85 15,75 40,50" style="fill:gray;" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="modalPrev" onclick="prevPicture();">
|
||||
<svg width="80" height="100">
|
||||
<polygon points="10,50 70,10 70,90" style="fill:gray;" />
|
||||
</svg>
|
||||
</div>
|
||||
<img id="modalPicture">
|
||||
<div class="modalNext" onclick="nextPicture();">
|
||||
<svg width="80" height="100">
|
||||
<polygon points="70,50 10,10 10,90" style="fill:gray;" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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.jpg"
|
||||
}, {
|
||||
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"
|
||||
}]
|
||||
|
||||
var currentPicture
|
||||
|
||||
const displayModal = (display) => {
|
||||
if (display) {
|
||||
document.getElementById("modal").style.display = "flex"
|
||||
} else {
|
||||
document.getElementById("modal").style.display = "none"
|
||||
window.location.hash = ""
|
||||
}
|
||||
}
|
||||
|
||||
// TODO add swipe support https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
|
||||
// TODO add arrow key navigation support
|
||||
|
||||
const prevPicture = () => {
|
||||
if (!isNaN(currentPicture)) {
|
||||
if (currentPicture === 0) {
|
||||
changePicture(pictures.length - 1)
|
||||
} else if (currentPicture < 0 || currentPicture >= pictures.length) {
|
||||
console.error("Invalid currentPicture, 0.." + pictures.length - 1 + ": " + currentPicture)
|
||||
} else {
|
||||
changePicture(currentPicture - 1)
|
||||
}
|
||||
} else {
|
||||
console.error("Invalid currentPicture, NaN: " + currentPicture)
|
||||
}
|
||||
}
|
||||
|
||||
const nextPicture = () => {
|
||||
if (!isNaN(currentPicture)) {
|
||||
if (currentPicture === pictures.length - 1) {
|
||||
changePicture(0)
|
||||
} else if (currentPicture < 0 || currentPicture >= pictures.length) {
|
||||
console.error("Invalid currentPicture, 0.." + pictures.length - 1 + ": " + currentPicture)
|
||||
} else {
|
||||
changePicture(currentPicture + 1)
|
||||
}
|
||||
} else {
|
||||
console.error("Invalid currentPicture, NaN: " + currentPicture)
|
||||
}
|
||||
}
|
||||
|
||||
const changePicture = (number) => {
|
||||
thumbnailFilename = pictures[number].thumbnail
|
||||
window.location.hash = thumbnailFilename.substring(thumbnailFilename.indexOf("/") + 1)
|
||||
document.getElementById("modalPicture").src = pictures[number].fullsize
|
||||
document.getElementById("modalPicture").alt = pictures[number].fullsize.substring(pictures[number].fullsize.indexOf("/") + 1)
|
||||
currentPicture = number
|
||||
}
|
||||
|
||||
const hashNavigate = () => {
|
||||
if (window.location.hash) {
|
||||
const thumbnail = decodeURIComponent(window.location.hash.substring(1))
|
||||
id = pictures.findIndex(item => item.thumbnail.substring(item.thumbnail.indexOf("/") + 1) == thumbnail)
|
||||
if (id != -1 && id >= 0 && id < pictures.length) {
|
||||
changePicture(id)
|
||||
displayModal(true)
|
||||
} else {
|
||||
console.error("Invalid thumbnail link provided after # in URI")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = hashNavigate
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue