diff --git a/layout/_partial/image-viewer.ejs b/layout/_partial/image-viewer.ejs
index 0a80b69..2573efe 100644
--- a/layout/_partial/image-viewer.ejs
+++ b/layout/_partial/image-viewer.ejs
@@ -1,5 +1,3 @@
-
-
-
+
diff --git a/source/css/layout/_partial/image-viewer.styl b/source/css/layout/_partial/image-viewer.styl
index c295362..d40151b 100644
--- a/source/css/layout/_partial/image-viewer.styl
+++ b/source/css/layout/_partial/image-viewer.styl
@@ -1,30 +1,37 @@
.image-viewer-container {
position: fixed;
- right: 0;
left: 0;
- bottom: 0;
top: 0;
width: 100%;
height: 100%;
- background: rgba(0, 0, 0, 0.6);
- z-index: $z-index-9;
- display: none;
+ display: flex;
align-items: center;
justify-content: center;
+ background: rgba(0, 0, 0, 0);
+ visibility: hidden;
+ z-index: $z-index-8;
+ padding: 6%;
+ box-sizing: border-box;
+ transition();
-
- .img-box {
- position: relative;
- width: 80%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
+ &.active {
+ background: rgba(0, 0, 0, 0.5);
+ visibility: visible;
img {
- max-width: 100%;
- max-height: 100%;
- cursor: pointer;
+ cursor: zoom-out;
+ transform: scale(1);
+ padding: 2px;
+ background: var(--background-color);
}
}
+
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ transform: scale(0);
+ transition();
+ }
}
+
+
diff --git a/source/css/layout/common/markdown.styl b/source/css/layout/common/markdown.styl
index 9a5d816..1a52756 100644
--- a/source/css/layout/common/markdown.styl
+++ b/source/css/layout/common/markdown.styl
@@ -169,7 +169,7 @@
img {
box-sizing: border-box;
max-width: 100%;
- cursor: pointer;
+ cursor: zoom-in;
display: block;
box-shadow: 0 0 2px var(--shadow-color);
diff --git a/source/js/utils.js b/source/js/utils.js
index 8452b1a..848519d 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -167,9 +167,13 @@ KEEP.initUtils = () => {
imageViewer() {
let isBigImage = false;
- const showHandle = (dom, isShow) => {
+ const showHandle = (maskDom, isShow) => {
document.body.style.overflow = isShow ? 'hidden' : 'auto';
- dom.style.display = isShow ? 'flex' : 'none';
+ if (isShow) {
+ maskDom.classList.add('active');
+ } else {
+ maskDom.classList.remove('active');
+ }
}
const imageViewerDom = document.querySelector('.image-viewer-container');
@@ -186,11 +190,11 @@ KEEP.initUtils = () => {
img.addEventListener('click', () => {
isBigImage = true;
showHandle(imageViewerDom, isBigImage);
- targetImg.setAttribute('src', img.getAttribute('src'))
+ targetImg.setAttribute('src', img.getAttribute('src'));
});
});
} else {
- this.pageContainer_dom.removeChild(imageViewerDom)
+ this.pageContainer_dom.removeChild(imageViewerDom);
}
},