GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-26 21:04:58 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

gallery

Browse Source
This commit is contained in:
Kyle
2020-10-18 10:27:35 -07:00
parent 489081cb8f
commit 889258a26a
3 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
gallery/gallery.css
View File

@@ -65,10 +65,13 @@
display: block;
}
#fullImageViewbox > img {
margin: 1rem;
height: calc(100% - 2rem);
width: auto;
cursor: default;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
width: calc(100vw - 2rem);
height: calc(100vh - 2rem);
animation-duration: 0.5s;
}
#fullImageViewbox.visible > img.visible {
@@ -76,15 +79,15 @@
}
#fullImageViewbox.visible > img:not(.visible) {
animation-name: previewOut;
position: relative; top: 100vh;
animation-duration: 0.3s;
transform: translate(-50%, calc(50% + 1rem));
}
@keyframes previewIn {
from {position: relative; top: 100vh;}
to {position: relative; top: 0;}
from {transform: translate(-50%, calc(50% + 1rem));}
to {transform: translate(-50%, -50%);}
}
@keyframes previewOut {
from {position: relative; top: 0;}
to {position: relative; top: 100vh;}
from {transform: translate(-50%, -50%);}
to {transform: translate(-50%, calc(50% + 1rem));}
}

11
gallery/gallery.js
View File

@@ -38,15 +38,16 @@ function buildHTML(imageNameList) {
function zoomImage(event) {
document.getElementById('fullImage').src = '/gallery/images/fullres/' + event.target.imageName
document.getElementById('fullImage').classList = 'visible'
document.getElementById('fullImagePreview').src = '/gallery/images/preview/' + event.target.imageName
document.getElementById('fullImagePreview').classList = 'visible'
document.getElementById('fullImageViewbox').classList = 'visible'
windowY = window.scrollY
}
function unzoomImage(event) {
if (event.target.id != 'fullImage') {
document.getElementById('fullImage').classList = ''
setTimeout(function(){document.getElementById('fullImageViewbox').classList = ''}, 300)
}
function unzoomImage() {
document.getElementById('fullImage').classList = ''
document.getElementById('fullImagePreview').classList = ''
setTimeout(function(){document.getElementById('fullImageViewbox').classList = ''}, 300)
}
window.addEventListener('scroll', scrollEvent, false)

3
gallery/index.html
View File

@@ -25,7 +25,8 @@
<script defer src="/data/scripts/animations.js"></script>
<script defer src="/gallery/gallery.js"></script>
</footer>
<div id='fullImageViewbox' onclick='unzoomImage(event)'>
<div id='fullImageViewbox' onclick='unzoomImage()'>
<img id='fullImagePreview'>
<img id='fullImage'>
</div>
<html>