GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -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; display: block;
} }
#fullImageViewbox > img { #fullImageViewbox > img {
margin: 1rem; position: fixed;
height: calc(100% - 2rem); left: 50%;
width: auto; top: 50%;
cursor: default; transform: translate(-50%, -50%);
object-fit: contain;
width: calc(100vw - 2rem);
height: calc(100vh - 2rem);
animation-duration: 0.5s; animation-duration: 0.5s;
} }
#fullImageViewbox.visible > img.visible { #fullImageViewbox.visible > img.visible {
@@ -76,15 +79,15 @@
} }
#fullImageViewbox.visible > img:not(.visible) { #fullImageViewbox.visible > img:not(.visible) {
animation-name: previewOut; animation-name: previewOut;
position: relative; top: 100vh;
animation-duration: 0.3s; animation-duration: 0.3s;
transform: translate(-50%, calc(50% + 1rem));
} }
@keyframes previewIn { @keyframes previewIn {
from {position: relative; top: 100vh;} from {transform: translate(-50%, calc(50% + 1rem));}
to {position: relative; top: 0;} to {transform: translate(-50%, -50%);}
} }
@keyframes previewOut { @keyframes previewOut {
from {position: relative; top: 0;} from {transform: translate(-50%, -50%);}
to {position: relative; top: 100vh;} to {transform: translate(-50%, calc(50% + 1rem));}
} }

7
gallery/gallery.js
View File

@@ -38,16 +38,17 @@ function buildHTML(imageNameList) {
function zoomImage(event) { function zoomImage(event) {
document.getElementById('fullImage').src = '/gallery/images/fullres/' + event.target.imageName document.getElementById('fullImage').src = '/gallery/images/fullres/' + event.target.imageName
document.getElementById('fullImage').classList = 'visible' 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' document.getElementById('fullImageViewbox').classList = 'visible'
windowY = window.scrollY windowY = window.scrollY
} }
function unzoomImage(event) { function unzoomImage() {
if (event.target.id != 'fullImage') {
document.getElementById('fullImage').classList = '' document.getElementById('fullImage').classList = ''
document.getElementById('fullImagePreview').classList = ''
setTimeout(function(){document.getElementById('fullImageViewbox').classList = ''}, 300) setTimeout(function(){document.getElementById('fullImageViewbox').classList = ''}, 300)
} }
}
window.addEventListener('scroll', scrollEvent, false) 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="/data/scripts/animations.js"></script>
<script defer src="/gallery/gallery.js"></script> <script defer src="/gallery/gallery.js"></script>
</footer> </footer>
<div id='fullImageViewbox' onclick='unzoomImage(event)'> <div id='fullImageViewbox' onclick='unzoomImage()'>
<img id='fullImagePreview'>
<img id='fullImage'> <img id='fullImage'>
</div> </div>
<html> <html>