Jqueryでlightbox風の画像をpopupする方法_技術三昧ブログ

ホーム » ブログ » Jqueryでlightbox風の画像をpopupする方法

@2014/05/19

Jqueryでlightbox風の画像popupサンプルです。Jqueryを知ってる方はソースを見ればすぐにわかると思う。
それでは、全体のソースです。ローカルに.htmlファイルにコピーし、すぐにブラウザで効果を確認できる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Jqueryでlightbox風の画像をpopupする方法</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
	// popup用のDIVを作成する
	$("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");
	
	$("#glayLayer").click(function(){
		$(this).hide();
		$("#overLayer").hide();
	});

	// 画像をクリックされたら、popupさせる
	$(".lBoxImg").click(function(){
		// popup画像のHTML
		var imgHtml = '<img src="' + $(this).prop('src') + '" class="' +$(this).prop('class') + '" alt="'+ $(this).prop('alt')+'" style="cursor: auto;">';
		var authorLinkHtml = '<div style="font-size:10px;color:gray;;clear:both;text-align:center;">Powered by <a href="http://www.zanmai.net">zanmai.net</a></div>';

		$("#glayLayer").show();
		$("#overLayer").show().html("<img src='./btn_close.png' class='close' />"+imgHtml+authorLinkHtml).css({
			marginTop:"-"+$("#overLayer").height()/2+"px" , 
			marginLeft:"-"+$("#overLayer").width()/2+"px" 
		});

		// Closeボタンの位置を設定
		$(".close").css({
			 top:"-"+$(".close").height()/2+"px" , 
			 right:"-"+$(".close").width()/2+"px" 
		 });
		
		$("#overLayer img.close").click(function(){
			$("#glayLayer").hide();
			$("#overLayer").hide();
		})
		return false;
	});

	// 古いバージョンのIEを対応（注意：最新のJqueryでは$.browser.msieが使えない）
	if($.browser.msie && $.browser.version<7){
		$(window).scroll(function(){
			$("#glayLayer").get(0).style.setExpression("top","$(document).scrollTop()+'px'")
			$("#overLayer").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'")
		})
	}
})
</script>
<style type="text/css">
div#glayLayer{
	display:none;
	position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:#7BAEB5;
	filter:alpha(opacity=75);
	opacity: 0.75;
}
* html div#glayLayer{
	position:absolute;
}
#overLayer{
	display:none;
	background:white;
	padding:10px;
	position: fixed;
	top:50%;
	left:50%;
}
#overLayer img.close{
	position:absolute;
	top:-10px;
	right:-10px;
	cursor:pointer;
}
* html #overLayer{
	position: absolute;
}

.lBoxImg {
	cursor:pointer;
}
</style>
</head>
<body>

<div>
	<img src="http://www.zanmai.net/images/blog/thum/veloce.jpg" class="lBoxImg">
</div>

</body>
</html>

【!】popup画像のcloseボタンの画像は、お好きなclose画像をご用意してください。

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/197.html

閉じる

Jqueryでlightbox風の画像をpopupする方法_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！