jQueryでギャラリーページを作る。

fadeIn、fadeOut等の練習がてらjQuery本体だけで簡単なギャラリーページを作ってみました。

小さな画像をクリックすると表示されている画像がfadeOutし、新しい画像が読み込まれるまでLoading画像が表示され、新しい画像読み込み終わった時点でfadeInし、あわせてLoading画像が消えていきます。

ソース

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryでギャラリー（フェードイン・フェードアウト）</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function(){
	$("#menu img").click(function(){
		//loadingを削除
		$("#loading").remove();
		//サムネイルの画像URLを取得
		thumbURL = $(this).attr("src");
		//サムネイルの画像URLを大きい画像URLに書き換え
		imgURL = thumbURL.replace("/s_","/b_");
		//大きい画像を読み込み
		var image = new Image();
		image.imgURL;
		//Loading画像を表示
		$("#imgbox").append('<div id="loading" style="position:absolute;top:0;left:0;z-index:100;"><img src="./img/download.gif" /></div>');
		//画像をフェードアウト
		$("#bigimg").fadeOut(
				"slow",
				function() {
					//大きい画像の入れ替え
					$("#bigimg").attr("src", imgURL);
					//画像の読み込みが完了したら…
					$("#bigimg").load(function () {
						//フェードイン
						$("#bigimg").fadeIn(2000);
						//Loading画像をフェードアウト
						$("#loading").animate({opacity:0}, 800, "linear");
					});
				}
		);
	});

});
</script>
<style type="text/css">
body {
	background: #000000;
	color: #ffffff;
}
a {
	color: #dddddd;
}
#wrap {
	width: 800px;
	margin: 30px auto;
}
#menu {
	float: right;
	width: 80px;
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#imgbox {
	width: 610px;
	height: 610px;
	background: #000;
	position: relative;
}
#bigimg {
	margin: auto;
	margin-right: auto;
	display: block;
}
img {
	padding: 2px;
	border: 2px solid #cccccc;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Image Gallery</h1>
<p>画像はこちらサイトの画像をお借りしました。<a href="http://sozai-free.com/" class="openwin">2000ピクセル以上のフリー写真素材集</a></p>
<div id="menu">
<ul>
<li><img src="./img/s_1.jpg" /></li>
<li><img src="./img/s_2.jpg" /></li>
<li><img src="./img/s_3.jpg" /></li>
<li><img src="./img/s_4.jpg" /></li>
</ul>
</div>
<div id="imgbox"><img src="./img/b_1.jpg" id="bigimg" /></div>
</div>
</body>
</html>

ひとまずサムネイル画像は「s_○.jpg」、大きい画像は「b_○.jpg」で名前をつけてimgディレクトリに一緒にほり込んで、画像のサイズに合わせてCSSを書き換えれば動作します。

今回はとにかく簡単で、最低限そのままでも使えそうな感じで基本形を作ってみましたが、もうちょっとJavascriptやjQueryがわかっていれば、もっと簡単に記述できる気がする…。

まあ記述はよしとして、クロスフェードや別の動きを盛り込んでいきながら作り込んでいこ。

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。