読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

画像クリックで背景が暗くなって、拡大画像が表示されるようになるjQueryサンプル

jQuery
<スポンサーリンク>

読み込み中の「Now loading」のグルグルを手に入れるには

以下の「Loader Generator」を使えばいい。
http://loadergenerator.com/
自分でグルグルを作って、それを好きにダウンロードすることができる。

他にもCSSジェネレータなるものがある。
http://web-dou.com/

画像クリックで背景が暗くなって、拡大画像が表示されるようになるjQueryサンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画像を拡大させてフェードインする</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="./js/jquery.1.10.2.min.js"></script>
<script type="text/javascript">
var y = 0;
function play() {
	$("#bigImg").css("display","none").css("visibility","visible");
	$("#loading").remove();
	var w = $(window).width();
	var h = $(window).height();
	var imgW = $("#bigImg").width();
	var imgH = $("#bigImg").height();
	var imgLeft = (h-imgH-10*2)/2;
	var imgTop = (h-imgH-10*2-50)/2 + y;
	imgLeft = Math.floor(imgLeft);
	imgTop = Math.floor(imgTop);
	$("#bigImg").css("left",imgLeft+"px").css("top",imgTop+"px");
	$("#close").css("left",imgLeft+"px").css("top",imgTop+imgH+10*2+"px");
	$("#close").width(imgW);
	//大きなイメージ画像にcloseの文字がフェードインするようにする
	$("#bigImg, #close").fadeIn(2000);
}
$(function() {
	$(window).scroll(function() {
		var y1 = document.documentElement.scrollTop;
		var y2 = document.body.scrollTop;
		if (y1 > y2) {
			y = y1;
		} else {
			y = y2;
		}
		$("#background").css("top",y+"px");
	});

	//最初に画像をクリックされたときの処理
	$("img.mini").click(function() {
		var h = $(window).height();
		//背景を設定する。
		$("#background").height(h);
		//透過の設定を行うのがopacity
		$("#background").css("opacity","0.7").fadeIn(200);
		//読み込み中のグルグルを回す
		$("#background").append("<img src='img/gif-load.gif' id='loading' style='margin-top:150px'>");
		//b_imgフォルダに入れたをつけた拡大画像
		var fname = "b_"+$(this).attr("src");
		$("body").append("<img src='" + fname + "' class='big' id='bigImg'>");
		$("#bigImg").css("visibility","hidden").css("display","block");
		//大きな画像が見えるようにする
		$("#bigImg").load(play());
	});

	$("#close").click(function(){
		$("#bigImg").remove();
		$("#background,#close").css("display","none");
	});

});
</script>
</head>
<body>
<h1>画像ギャラリーです</h2>
<img src="img/001.jpg" class="mini">
<img src="img/003.jpg" class="mini">
<img src="img/025.jpg" class="mini">
<img src="img/017.jpg" class="mini">
<!-- 背景用のdiv-->
<div class="background" id="background"></div>
<p class="close" id="close">close</p>
</body>
</html>

CSS

div.background{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0px; left:0px;
	z-index:1;
	background-color: #000000;
	display:none;
}
img.big {
	position: absolute;
	top:0px; left:0px;
	z-index: 2;
	border: solid 10px #FFFFFF;
	display :none;
	width: 500px;
	height:600px;
}

p.close {
	height:30px;
	position: absolute;
	top:0px;left:0px;
	z-index:3;
	font: bold 12pt sans-serif;
	text-align: right;
	background-color: #FFFFFF;
	padding: 10px;
	margin: 0px;
	cursor: pointer;
	display: none;
}
.mini {
	height:300px;
	width:250px;
}

以下の書籍を参考にしました

jQueryプログラミング入門―Ajaxにも使えるJavaScriptライブラリ

jQueryプログラミング入門―Ajaxにも使えるJavaScriptライブラリ


この本は、jQueryの基礎の基礎の部分からサンプルを紹介して説明してくれる良質な入門書です。
今回のサンプルは本の内容をほぼ参考にいただきました(ありがとうございます)が、書籍にはplay()の関数の呼び出しがplayと書かれていたりする記述がありました。(p.146ページのサンプル)

感謝のプログラミング

今回で感謝のプログラミングは【637時間目】
10000時間まで、あと【9363時間】