summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--data/style.css28
-rw-r--r--elm/iv.js22
2 files changed, 48 insertions, 2 deletions
diff --git a/data/style.css b/data/style.css
index 08cee73d..5e1301c4 100644
--- a/data/style.css
+++ b/data/style.css
@@ -1016,6 +1016,34 @@ div#iv_view {
.ivview { position: fixed; background: $boxbg$; border: 2px solid $border$; padding: 5px; text-align: center }
.ivview img { cursor: pointer }
.ivview > div:nth-child(1) { position: absolute; left: 48%; top: 48%; width: 30px; height: 30px }
+.ivview > div:nth-child(2) { position: relative }
+.ivview > div:nth-child(2) .left-pane {
+ position: absolute;
+ border: none;
+ height: 100%;
+ width: 25%;
+ top: 0;
+ transition: opacity 0.25s ease-in-out;
+ opacity: 0;
+ background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
+}
+.ivview > div:nth-child(2) .left-pane:hover {
+ opacity: 1;
+}
+.ivview > div:nth-child(2) .right-pane {
+ position: absolute;
+ border: none;
+ height: 100%;
+ width: 25%;
+ top: 0;
+ right: 0;
+ transition: opacity 0.25s ease-in-out;
+ opacity: 0;
+ background: linear-gradient(270deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
+}
+.ivview > div:nth-child(2) .right-pane:hover {
+ opacity: 1;
+}
.ivview > div:nth-child(3) { width: 100%; display: flex }
.ivview > div:nth-child(3) > a { flex: 1; text-align: left; border: 0; font-weight: bold; font-size: 14px; white-space: nowrap }
.ivview > div:nth-child(3) > a:nth-child(2) { text-align: right; padding-right: 5px }
diff --git a/elm/iv.js b/elm/iv.js
index 167b0c93..06bb6f5a 100644
--- a/elm/iv.js
+++ b/elm/iv.js
@@ -24,6 +24,8 @@ var ivimg;
var ivfull;
var ivnext;
var ivprev;
+var ivhovernext;
+var ivhoverprev;
var ivload;
var ivflag;
@@ -62,6 +64,16 @@ function create_div() {
ivnext.textContent = 'next ยป';
ivlinks.appendChild(ivnext);
+ ivhoverprev = document.createElement('a');
+ ivhoverprev.onclick = show;
+ ivhoverprev.className = "left-pane";
+ ivimg.appendChild(ivhoverprev);
+
+ ivhovernext = document.createElement('a');
+ ivhovernext.onclick = show;
+ ivhovernext.className = "right-pane";
+ ivimg.appendChild(ivhovernext);
+
ivflag = document.createElement('a');
ivlinks.appendChild(ivflag);
@@ -137,13 +149,15 @@ function show(ev) {
imgh = Math.floor(opt[0].split('x')[1]);
create_div();
+ var imgs = ivimg.getElementsByTagName("img")
+ if (imgs.length !== 0)
+ ivimg.getElementsByTagName("img")[0].remove()
var img = document.createElement('img');
img.src = u;
ivfull.href = u;
img.onclick = ivClose;
img.onload = function() { ivload.style.display = 'none' };
- ivimg.textContent = '';
ivimg.appendChild(img);
var flag = opt[2] ? opt[2].match(/^([0-2])([0-2])([0-9]+)$/) : null;
@@ -161,6 +175,8 @@ function show(ev) {
ivload.style.display = 'block';
fixnav(ivprev, opt[1], idx, -1);
fixnav(ivnext, opt[1], idx, 1);
+ fixnav(ivhoverprev, opt[1], idx, -1);
+ fixnav(ivhovernext, opt[1], idx, 1);
resize();
document.addEventListener('click', ivClose);
@@ -180,7 +196,9 @@ window.ivClose = function(ev) {
document.removeEventListener('keydown', keydown);
window.removeEventListener('resize', resize);
ivparent.style.display = 'none';
- ivimg.textContent = '';
+ var imgs = ivimg.getElementsByTagName("img")
+ if (imgs.length !== 0)
+ ivimg.getElementsByTagName("img")[0].remove()
return false;
};