diff --git a/gallery/gallery.css b/gallery/gallery.css
index 4ad648e7..089c8225 100644
--- a/gallery/gallery.css
+++ b/gallery/gallery.css
@@ -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));}
}
\ No newline at end of file
diff --git a/gallery/gallery.js b/gallery/gallery.js
index 131f6139..0bf7ee00 100644
--- a/gallery/gallery.js
+++ b/gallery/gallery.js
@@ -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)
diff --git a/gallery/index.html b/gallery/index.html
index e40792ad..143db564 100644
--- a/gallery/index.html
+++ b/gallery/index.html
@@ -25,7 +25,8 @@
-
+
+
![]()
![]()