/* Simple image viewer widget. Usage:
*
* ..
*
* Clicking on the above link will cause the image viewer to open
* full_image.jpg. The {category} part can be empty or absent. If it is not
* empty, next/previous links will show up to point to the other images within
* the same category.
*
* ivInit() should be called when links with "data-iv" attributes are
* dynamically added or removed from the DOM.
*/
// Cache of image categories and the list of associated link objects. Used to
// quickly generate the next/prev links.
var cats;
function init() {
cats = {};
var n = 0;
var l = byName('a');
for(var i=0;i=0 && j 0 && cats[cat][j].offsetHeight > 0)
return cats[cat][j];
return 0
}
// fix properties of the prev/next links
function fixnav(lnk, cat, i, dir) {
var a = cat ? findnav(cat, i, dir) : 0;
lnk.style.visibility = a ? 'visible' : 'hidden';
lnk.href = a ? a.href : '#';
lnk.iv_i = a ? a.iv_i : 0;
lnk.setAttribute('data-iv', a ? a.getAttribute('data-iv') : '');
}
function show() {
var u = this.href;
var opt = this.getAttribute('data-iv').split(':');
var idx = this.iv_i;
var view = byId('iv_view');
var full = byId('ivfull');
fixnav(byId('ivprev'), opt[1], idx, -1);
fixnav(byId('ivnext'), opt[1], idx, 1);
// calculate dimensions
var w = Math.floor(opt[0].split('x')[0]);
var h = Math.floor(opt[0].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);
full.style.visibility = 'visible';
if(w/h > ww/wh) { // width++
h *= (ww-100)/w;
w = ww-100;
} else { // height++
w *= (wh-70)/h;
h = wh-70;
}
} else
full.style.visibility = 'hidden';
var dw = w;
var dh = h+20;
dw = dw < 200 ? 200 : dw;
// update document
setClass(view, 'hidden', false);
setContent(byId('ivimg'), tag('img', {src:u, onclick:close,
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';
byId('ivimgload').style.left = ((ww - 100) / 2 - 10)+'px';
byId('ivimgload').style.top = ((wh - 20) / 2 + st)+'px';
setClass(byId('ivimgload'), 'hidden', false);
return false;
}
function close() {
setClass(byId('iv_view'), 'hidden', true);
setClass(byId('ivimgload'), 'hidden', true);
setText(byId('ivimg'), '');
return false;
}
window.ivInit = init;
init();