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

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

概要
画像クリックで大きな画像をポップアップ表示します。
ポップアップする大画像とサムネイル画像は同ファイルです。
事情により敢えてファイルを1個にしたい場合に使用します。
使用方法
JavaScript内のコメント参照ください。
備考
大画像とサムネイル画像を分けた場合のJavaScriptコードを改変している為、一部無駄な記述があるかと思います。

/**
 * flyout self
 *
 * usage:
 * <img src="image/aaa.gif" class="flyoutself" alt="text">
 * 画像をポップアップ表示する
 *
 * 例えば、原寸800x500の画像をcssで200x125で縮小表示している場合、
 * ポップアップ表示では原寸の800x500で表示される。
 * 大画像とサムネイルで同じ画像ファイルを使用する場合。
 *
 * @auther 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);
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page