ポップアップ表示(大画像と小画像は同ファイル)

/**
 * flyout self
 *
 * usage:
 * <img src="image/aaa.gif" class="flyoutself" alt="text">
 * 画像をポップアップ表示する
 *
 * 例えば、原寸800x500の画像をcssで200x125で縮小表示している場合、
 * ポップアップ表示では原寸の800x500で表示される。
 * 大画像とサムネイルで同じ画像ファイルを使用する場合。
 *
 * @author ao-system
 */

(function(window,document){
	var openSpeed = 1000;	//調整可能
	var closeSpeed = 400;	//調整可能
	var shown = false;	//work
	var animating = false;	//work
	var nowLoading = false;	//work
	var thumbElm;	//work
	var wrapElm;	//work
	var largeElm;	//work
	var headerText;	//work
	var footerText;	//work
	var largeAdjustWidth;	//work
	var largeAdjustHeight;	//work
	init();

/**
 * common
 *
 */
	function scrolltop() {
		var bdy = document.body;
	    var d = document.documentElement;
	    if (bdy && bdy.scrollTop) {
			return bdy.scrollTop;
		}
	    if (d && d.scrollTop) {
			return d.scrollTop;
		}
	    if (window.pageYOffset) {
			return window.pageYOffset;
		}
	    return 0;
	}
	function cumulativeOffset(elm) {
		var ofsTop = 0;
		var ofsLeft = 0;
		do {
			ofsTop  += elm.offsetTop  || 0;
			ofsLeft += elm.offsetLeft || 0;
			elm = elm.offsetParent;
		} while (elm);
		return {
			ofsTop: ofsTop
			,ofsLeft: ofsLeft
		}
	}

/**
 * start
 *
 */
	function init() {
		var imgs = document.getElementsByTagName('img');
		for (var i = 0; i < imgs.length; i++) {
			if (imgs[i].getAttribute('class')) {
				var classes = imgs[i].getAttribute('class').split(' ');
				for (var j = 0; j < classes.length; j++) {
					if (classes[j] == 'flyoutself') {
						(function(elm){
							elm.addEventListener('click',function(){clickImg(elm);},false);	//サムネイルをクリック
							elm.style.cursor = 'pointer';
						})(imgs[i]);
					}
				}
			}
		}
	}
	function clickImg(elm) {
		if (animating == true) {
			return;
		}
		if (shown) {
			putAway(elm);
		} else {
			flyOutImage(elm);
		}
	}
	function loading(flag) {
		if (nowLoading == false) {
			thumbElm.style.opacity = '';
			return;
		}
		if (flag) {
			thumbElm.style.opacity = '';
			setTimeout(function(){loading(false);},250);
		} else {
			thumbElm.style.opacity = '0.5';
			setTimeout(function(){loading(true);},250);
		}
	}

/**
 * flyOut Large image
 *
 */
	function flyOutImage(elm) {
		animating = true;
		shown = true;
		thumbElm = elm;
		wrapElm = document.createElement('div');
		wrapElm.style.position = 'absolute';
		var ofs = cumulativeOffset(thumbElm);
		wrapElm.style.left = ofs.ofsLeft + 'px';
		wrapElm.style.top = ofs.ofsTop + 'px';
		wrapElm.style.backgroundColor = '#eee';
		wrapElm.style.cursor = '';
		largeElm = new Image();
		largeElm.onload = function(){
			nowLoading = false;
			loadLargeImage();
		};
		largeElm.src = thumbElm.src;
		nowLoading = true;
		loading(false);
	}
	function loadLargeImage() {
		largeElm.style.width = thumbElm.width + 'px';
		largeElm.style.height = thumbElm.height + 'px';
		largeElm.style.margin = '0px';
		wrapElm.style.width = thumbElm.width + 'px';
		wrapElm.style.height = thumbElm.height + 'px';
		wrapElm.style.transition = 'all ' + (openSpeed / 1000) + 's';
		largeElm.style.transition = 'all ' + (openSpeed / 1000) + 's';
		wrapElm.style.opacity = '0.0';
		wrapElm.appendChild(largeElm);
		document.body.appendChild(wrapElm);
		setTimeout(function(){loadLargeImageAnimate();},50);
		setTimeout(function(){
			if (thumbElm.getAttribute('alt')) {
				altText(thumbElm.getAttribute('alt'));
			}
			closeText();
			wrapElm.style.cursor = 'pointer';
			animating = false;
		},openSpeed);
	}
	function loadLargeImageAnimate() {
		largeAdjustWidth = largeElm.naturalWidth;
		largeAdjustHeight = largeElm.naturalHeight;
		if (largeAdjustWidth > (window.innerWidth - 80 - 20)) {
			largeAdjustWidth = window.innerWidth - 80 - 20;
			largeAdjustHeight = Math.floor((window.innerWidth - 80 - 20) * largeElm.naturalHeight / largeElm.naturalWidth);
		}
		if (largeAdjustHeight > (window.innerHeight - 80 - 20)) {
			largeAdjustHeight = window.innerHeight - 80 - 20;
			largeAdjustWidth = Math.floor((window.innerHeight - 80 - 20) * largeElm.naturalWidth / largeElm.naturalHeight);
		}
		largeElm.style.width = largeAdjustWidth + 'px';
		largeElm.style.height = largeAdjustHeight + 'px';
		largeElm.style.margin = '40px';
		wrapElm.style.width = (largeAdjustWidth + 80) + 'px';
		wrapElm.style.height = (largeAdjustHeight + 80) + 'px';
		wrapElm.style.left = Math.floor((window.innerWidth - largeAdjustWidth) / 2 - 40) + 'px';
		wrapElm.style.top = Math.floor(((window.innerHeight - largeAdjustHeight) / 2 - 40) + scrolltop()) + 'px';
		wrapElm.style.opacity = '1.0';
		wrapElm.addEventListener('click',function(){clickImg(largeElm);},false);	//開いている大きな画像をクリック
	}

/**
 * open後
 *
 */
	function altText(str) {
		headerText = document.createElement('div');
		headerText.innerHTML = str;
		headerText.style.position = 'absolute';
		headerText.style.width = (largeAdjustWidth + 80) + 'px';
		headerText.style.textAlign = 'center';
		headerText.style.top = '6px';
		headerText.style.color = '#fff';
		headerText.style.fontSize = '20px';
		wrapElm.appendChild(headerText);
	}
	function closeText() {
		footerText = document.createElement('div');
		footerText.innerHTML = 'CLOSE';
		footerText.style.position = 'absolute';
		footerText.style.width = (largeAdjustWidth + 80) + 'px';
		footerText.style.textAlign = 'center';
		footerText.style.top = (largeAdjustHeight + 49) + 'px';
		footerText.style.color = '#888';
		footerText.style.fontSize = '16px';
		wrapElm.appendChild(footerText);
	}
	function putAway(nextElm) {
		if (animating == true || shown == false) {
			return;
		}
		if (shown) {
			animating = true;
			setTimeout(function(){
				wrapElm.style.transition = 'all ' + (closeSpeed / 1000) + 's';
				largeElm.style.transition = 'all ' + (closeSpeed / 1000) + 's';
				largeElm.style.width = thumbElm.width + 'px';
				largeElm.style.height = thumbElm.height + 'px';
				largeElm.style.margin = '0px';
				wrapElm.style.width = thumbElm.width + 'px';
				wrapElm.style.height = thumbElm.height + 'px';
				var ofs = cumulativeOffset(thumbElm);
				wrapElm.style.left = ofs.ofsLeft + 'px';
				wrapElm.style.top = ofs.ofsTop + 'px';
				wrapElm.style.opacity = '0.1';
				if (headerText) {
					wrapElm.removeChild(headerText);
				}
				wrapElm.removeChild(footerText);
			},50);
			setTimeout(function(){
				document.body.removeChild(wrapElm);
				animating = false;
				shown = false;
				if (nextElm != largeElm) {	//大きな画像をクリックした場合はfalse
					if (nextElm != thumbElm) {	//直前のサムネイル画像をクリックした場合はfalse
						clickImg(nextElm);
					}
				}
			},closeSpeed);
		}
	}
})(window,document);