///////////////////////////////////////////////////////////////////// // Auto-resizable popup layer // Version: 1.01 // Date: 2007-11-11 // Author: Mike Samokhvalov // WWW: http://www.puzzleclub.ru/files/popup/ // Copyright (C) 2007 /* Usage: 1-st method ~~~~~~~~~~~ Set "onclick" attribute to the elements: onclick="js_PopupImg.popup(this, 'image title')". Examples: 1)

2)

2-nd method ~~~~~~~~~~~ Add the "js_PopupImg.setPopupImages" function call at the bottom of the page (right before tag). Example:

image title

*/ var js_PopupImg = { defaultWidth : '320', defaultHeight : '240', imgTitle : 'Click image to close window.', closeBtn : true, closeBtnImg : 'button_close.png', id : { box : 'popup_box', cnt : 'popup_cnt', // container img : 'popup_img', header : 'popup_header' }, bInit : false, bComplete : false, position : 'absolute', isThumbnailImage : function(src) { if(!src) return false; if(src.search(/(?:_resize|_small|_t)\b/i) != -1) { return true; } return false; }, thumbnailToFull : function(src) { if(!src) return ''; return src.replace(/(?:_resize|_small|_t)\b/i, ''); }, getBox : function() { return document.getElementById(js_PopupImg.id.box); }, getCnt : function() { return document.getElementById(js_PopupImg.id.cnt); }, getImg : function() { return document.getElementById(js_PopupImg.id.img); }, init : function() { var navigator = null; if(js_PopupImg.bInit) return; js_PopupImg.bInit = true; if(navigator && navigator.appVersion && navigator.userAgent.indexOf('MSIE 6') != -1) { if(document.body) { document.body.style.height = '100%'; document.body.style.overflow = 'auto'; } js_PopupImg.position = 'absolute'; } }, popup : function(img, header) { if(!img || !img.src) return; js_PopupImg.popImageSrc(img.src, header); }, popImageSrc : function(src, header) { if(!src) return; js_PopupImg.close(); js_PopupImg.init(); src = js_PopupImg.thumbnailToFull(src); js_PopupImg.bComplete = false; var d = document.createElement('div'); d.id = js_PopupImg.id.box; d.setAttribute('style', 'position: ' + js_PopupImg.position + '; width: ' + js_PopupImg.defaultWidth + 'px; height: ' + js_PopupImg.defaultHeight + 'px; visibility: hidden;', false); d.onclick = function(){ js_PopupImg.close(); }; var i = new Image(); i.src = src; var html = ''; if(header) { html += ''; } html += '

'; d.innerHTML = html; document.body.appendChild(d); js_PopupImg.center(); d.style.height = 'auto'; js_PopupImg.showImage(); }, showImage : function(img) { if(js_PopupImg.bComplete) return; if(!img) img = js_PopupImg.getImg(); if(!img) return; var i = new Image(); i.src = img.src; if(i.width > 0 && i.height > 0) { js_PopupImg.bComplete = true; img.setAttribute('width', i.width, false); img.setAttribute('height', i.height, false); js_PopupImg.setBoxSize(i.width, i.height); } else { setTimeout(function(){ js_PopupImg.showImage(img); }, 100); } }, setBoxSize : function(w, h) { var p = js_PopupImg.getBox(); if(p) { p.style.width = w + 'px'; p.style.height = 'auto'; js_PopupImg.center(); p.style.visibility = 'visible'; } }, close : function() { var p = js_PopupImg.getBox(); if(p) p.parentNode.removeChild(p); }, center : function() { var p = js_PopupImg.getBox(); if(!p) return; var w = 0, h = 0; /*if(document.body.clientWidth) { w = document.body.clientWidth; h = document.body.clientHeight; } else */if(window.innerWidth && p.offsetWidth) { w = window.innerWidth; h = window.innerHeight; } if(w && h) { var l = (w - p.offsetWidth) / 2 + window.pageXOffset; var t = (h - p.offsetHeight) / 2 + window.pageYOffset; p.style.left = l + 'px'; p.style.top = t + 'px'; } }, setPopup : function(img) { var src = js_PopupImg.thumbnailToFull(img.src); if(src) { var t = img.getAttribute('title', false); t = t ? t : ''; var a = document.createElement('a'); a.setAttribute('href', 'javascript:js_PopupImg.popImageSrc(\x27' + src + '\x27,\x27' + t + '\x27)', false); a.appendChild(img.cloneNode(true)); img.parentNode.replaceChild(a, img); } }, setPopupImages : function() { var img = document.getElementsByTagName('img'); for(var i = 0; i < img.length; i++) { if(img[i].src && js_PopupImg.isThumbnailImage(img[i].src)) { js_PopupImg.setPopup(img[i]); } } } };