jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

ポップアップ表示

概要
画像クリックで大きな画像をポップアップ表示します。
また、画像やその他要素クリックで非表示エリアをポップアップします。
実装例はトップページに設置してあります。
使用方法
JavaScript内のコメント参照ください。
備考
実装するたびにちょこちょこ変更しています。

/**
 * flyout
 *
 * usage:
 * <img src="image/aaa01.gif" class="flyout" alt="text">
 * aaa01large.jpg という large を付加したファイルもセットで用意する事。
 * 最後の.(ドット)の前に large を付加する。
 *
 * usage:
 * <img src="image/aaa01.gif" class="flyout" data-flyout-object="objid" alt="text">
 * <div id="objid" style="display:none;">aaaa</div>
 *
 * @auther ao-system
 */
(function(window,document){
	var openSpeed = 1000;	//調整可能
	var closeSpeed = 400;	//調整可能
	var zIndexVar = 10;		//調整可能
	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 addEvt(elm, tpe, func) {
		if (elm.addEventListener) {
			return elm.addEventListener(tpe, func, false);
		} else if (elm.attachEvent) {
			return elm.attachEvent('on' + tpe, func);
		} else {
			return elm['on' + tpe] = func;
		}
	}
	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] == 'flyout') {
						(function(elm){
							addEvt(elm,'click',function(){clickImg(elm);});	//サムネイルをクリック
							elm.style.cursor = 'pointer';
						})(imgs[i]);
					}
				}
			}
		}
	}
	function clickImg(elm) {
		if (animating == true) {
			return;
		}
		if (shown) {
			putAway(elm);
		} else {
			if (elm.getAttribute('data-flyout-object')) {
				flyOutObject(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';
		//wrapElm.style.left = thumbElm.offsetLeft + 'px';
		//wrapElm.style.top = thumbElm.offsetTop + 'px';
		var ofs = cumulativeOffset(thumbElm);
		wrapElm.style.left = ofs.ofsLeft + 'px';
		wrapElm.style.top = ofs.ofsTop + 'px';
		wrapElm.style.backgroundColor = '#222';
		wrapElm.style.boxShadow = '0px 0px 20px rgba(255,255,255,0.4)';
		wrapElm.style.cursor = '';
		largeElm = new Image();
		largeElm.onload = function(){
			nowLoading = false;
			loadLargeImage();
		};
		largeElm.src = getLargeName(thumbElm.src);
		nowLoading = true;
		loading(false);
	}
	function getLargeName(src) {
		var srcs = src.split('.');
		var result = '';
		for (var i = 0; i < srcs.length; i++) {
			if (i + 2 == srcs.length) {
				result += srcs[i] + 'large.' + srcs[i + 1];
				break;
			}
			result += srcs[i] + '.';
		}
		return result;
	}
	function loadLargeImage() {
		largeElm.style.width = thumbElm.width + 'px';
		largeElm.style.height = thumbElm.height + 'px';
		largeElm.style.margin = '0px';
		wrapElm.style.zIndex = zIndexVar;
		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';
		addEvt(wrapElm,'click',function(){clickImg(largeElm);});	//開いている大きな画像をクリック
	}

/**
 * flyOut Object
 *
 */
	function flyOutObject(elm) {
		animating = true;
		shown = true;
		thumbElm = elm;
		wrapElm = document.createElement('div');
		wrapElm.style.position = 'absolute';
		//wrapElm.style.left = thumbElm.offsetLeft + 'px';
		//wrapElm.style.top = thumbElm.offsetTop + 'px';
		var ofs = cumulativeOffset(thumbElm);
		wrapElm.style.left = ofs.ofsLeft + 'px';
		wrapElm.style.top = ofs.ofsTop + 'px';
		wrapElm.style.backgroundColor = '#222';
		wrapElm.style.boxShadow = '0px 0px 20px rgba(255,255,255,0.4)';
		wrapElm.style.cursor = '';
		wrapElm.style.zIndex = zIndexVar;
		largeElm = document.createElement('div');
		largeElm.style.display = 'inline-block';
		largeElm.innerHTML = document.getElementById(elm.getAttribute('data-flyout-object')).innerHTML;
		loadObject();
		nowLoading = false;
		loading(false);
	}
	function loadObject() {
		document.body.appendChild(largeElm);
		largeAdjustWidth = largeElm.offsetWidth;	//実際の大きさ
		largeAdjustHeight = largeElm.offsetHeight;	//実際の大きさ
		document.body.removeChild(largeElm);
		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.style.overflow = 'hidden';
		wrapElm.appendChild(largeElm);
		document.body.appendChild(wrapElm);
		setTimeout(function(){loadObjectAnimate();},50);
		setTimeout(function(){
			if (thumbElm.getAttribute('alt')) {
				altText(thumbElm.getAttribute('alt'));
			}
			closeText();
			footerText.style.cursor = 'pointer';
			animating = false;
			addEvt(footerText,'click',function(){clickImg(largeElm);});	//CLOSEをクリック
		},openSpeed);
	}
	function loadObjectAnimate() {
		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';
	}

/**
 * open後
 *
 */
	function altText(str) {
		headerText = document.createElement('div');
		headerText.innerHTML = str;
		headerText.style.position = 'absolute';
		headerText.style.width = (largeAdjustWidth + 80) + 'px';
		headerText.style.height = '20px';
		headerText.style.textAlign = 'center';
		headerText.style.top = '8px';
		headerText.style.color = '#fff';
		headerText.style.fontSize = '16px';
		headerText.style.overflow = 'hidden';
		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';
				//wrapElm.style.left = thumbElm.offsetLeft + 'px';
				//wrapElm.style.top = thumbElm.offsetTop + '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);
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page