diff options
author | Yorhel <git@yorhel.nl> | 2015-07-19 05:12:06 +0200 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2015-07-19 05:12:06 +0200 |
commit | 195a729a3d254c1c0f4b0e374f23aec331baded5 (patch) | |
tree | 5a0b19b3332bddb90e6b639e11f275fc0aa369a9 /data | |
parent | 9da9c19cc2c74b019a827e759495c316030b8b0d (diff) |
js: Change image viewer clicking behaviour
Clicking on the image will now switch to the next image, or close the
viewer if there is no next. Clicking outside of the viewer will close
the it.
Diffstat (limited to 'data')
-rw-r--r-- | data/script.js | 31 | ||||
-rw-r--r-- | data/style.css | 16 |
2 files changed, 31 insertions, 16 deletions
diff --git a/data/script.js b/data/script.js index dddc800c..db9e83e4 100644 --- a/data/script.js +++ b/data/script.js @@ -231,14 +231,16 @@ function ivInit() { init++; l[i].onclick = ivView; } - if(init && !byId('iv_view')) { - addBody(tag('div', {id: 'iv_view','class':'hidden'}, - tag('b', {id:'ivimg'}, ''), - tag('br', null), - tag('a', {href:'#', id:'ivfull'}, ''), - tag('a', {href:'#', onclick: ivClose, id:'ivclose'}, mt('_js_close')), - tag('a', {href:'#', onclick: ivView, id:'ivprev'}, '« '+mt('_js_iv_prev')), - tag('a', {href:'#', onclick: ivView, id:'ivnext'}, mt('_js_iv_next')+' »') + if(init && !byId('iv_overlay')) { + addBody(tag('div', {id:'iv_overlay','class':'hidden', onclick: ivClose}, + tag('div', {id: 'iv_view', onclick: function(e) { e.stopPropagation() }}, + tag('b', {id:'ivimg'}, ''), + tag('br', null), + tag('a', {href:'#', id:'ivfull'}, ''), + tag('a', {href:'#', onclick: ivClose, id:'ivclose'}, mt('_js_close')), + tag('a', {href:'#', onclick: ivView, id:'ivprev'}, '« '+mt('_js_iv_prev')), + tag('a', {href:'#', onclick: ivView, id:'ivnext'}, mt('_js_iv_next')+' »') + ) )); addBody(tag('b', {id:'ivimgload','class':'hidden'}, mt('_js_loading'))); } @@ -248,6 +250,7 @@ function ivView(what) { what = what && what.rel ? what : this; var u = what.href; var opt = what.rel.split(':'); + var overlay = byId('iv_overlay'); var view = byId('iv_view'); var next = byId('ivnext'); var prev = byId('ivprev'); @@ -277,7 +280,6 @@ function ivView(what) { var h = Math.floor(opt[1].split('x')[1]); var ww = typeof(window.innerWidth) == 'number' ? window.innerWidth : document.documentElement.clientWidth; var wh = typeof(window.innerHeight) == 'number' ? window.innerHeight : document.documentElement.clientHeight; - var st = typeof(window.pageYOffset) == 'number' ? window.pageYOffset : document.body && document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop; if(w+100 > ww || h+70 > wh) { full.href = u; setText(full, w+'x'+h); @@ -296,23 +298,24 @@ function ivView(what) { dw = dw < 200 ? 200 : dw; // update document - setClass(view, 'hidden', false); - setContent(byId('ivimg'), tag('img', {src:u, onclick:ivClose, + setClass(overlay, 'hidden', false); + setContent(byId('ivimg'), tag('img', {src:u, + onclick: function() { next.rel ? ivView(next) : ivClose() }, onload: function() { setClass(byId('ivimgload'), 'hidden', true); }, style: 'width: '+w+'px; height: '+h+'px' })); view.style.width = dw+'px'; view.style.height = dh+'px'; view.style.left = ((ww - dw) / 2 - 10)+'px'; - view.style.top = ((wh - dh) / 2 + st - 20)+'px'; + view.style.top = ((wh - dh) / 2)+'px'; byId('ivimgload').style.left = ((ww - 100) / 2 - 10)+'px'; - byId('ivimgload').style.top = ((wh - 20) / 2 + st)+'px'; + byId('ivimgload').style.top = ((wh - 20) / 2 )+'px'; setClass(byId('ivimgload'), 'hidden', false); return false; } function ivClose() { - setClass(byId('iv_view'), 'hidden', true); + setClass(byId('iv_overlay'), 'hidden', true); setClass(byId('ivimgload'), 'hidden', true); setText(byId('ivimg'), ''); return false; diff --git a/data/style.css b/data/style.css index 2879a15c..39bd0da5 100644 --- a/data/style.css +++ b/data/style.css @@ -771,14 +771,25 @@ div.revision .item { text-align: center; } /****** Image Viewer *****/ +div#iv_overlay { + position: fixed; + top: 0; + right: 0; + bottom; 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; +} div#iv_view { - position: absolute; + position: fixed; top: 0px; left: 0px; background: url($_boxbg$) repeat; border: 1px solid $border$; padding: 5px; text-align: center; + z-index: 11; } #iv_view a { border: 0; font-weight: bold; font-size: 12px } #iv_view img { cursor: pointer } @@ -787,7 +798,7 @@ div#iv_view { #ivprev { padding-right: 5px; } #ivfull { float: left; padding-right: 10px; } #ivimgload { - position: absolute; + position: fixed; display: block; left: 0; top: 0; @@ -797,6 +808,7 @@ div#iv_view { text-align: center; border: 1px solid #ccc; color: #000; + z-index: 12; } |