diff options
-rw-r--r-- | data/style.css | 28 | ||||
-rw-r--r-- | elm/iv.js | 22 |
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 } @@ -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; }; |