jQueryでAmazon検索

jQueryの$.ajaxを練習がてら、今さらながらAmazon検索ページを作ってみました。

jQueryでAmazon検索

「Amazon Web サービス」を利用し、PHPでデータを取得しjQueryで処理をさせています。

検索後ページ下部に表示される「NEXT」をクリックすると、検索結果が追加されていきます。というか削除する処理をつけなければ勝手にこうなるのですが、検索した結果がページに蓄積されていくほうが使いやすいかと思い、そのままにしています。新しく検索すると前の結果は削除されます。（ちょっと処理が荒いのでソースはのせていません。興味がある方は直接ソースをのぞいてくださいな。）

なんかappendで追加したもののeventが取得できないっていう現象ではまりました。「NEXT」の部分は「a id=”next”」としてappendで追加していたけど「$(“a#next”).click」が動作せず。Firebugで確認してもちゃんと追加されてるし、動かない理由がわからず時間だけくってしまったので、仕様変更。根本的な知識が抜けているのか、単なるミスか。またちゃんと調べなければ。ひとまず今日はここまで。

参考ページ
特集：jQueryではじめるAjax｜gihyo.jp … 技術評論社

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

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

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

jQueryでギャラリー（フェードイン・フェードアウト）

ソース

<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がわかっていれば、もっと簡単に記述できる気がする…。

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

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

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

jQueryでフォームの画像ボタンをロールオーバーする

フォームのボタンはCSSである程度デザインをかえれるけど、いまいちなので「type=image」をよく使うけど、デフォルトのボタンのようなクリック感がなくなっていまいます。

ということで、クリック感をだすついでにロールオーバーでも画像を入れ替えるものを作ってみました。

jQuery – フォームの画像ボタンをロールオーバーする

JavaScript

<script language="JavaScript">
//画像をプリロード
function preload(Dir, imgs){
	var d = document;
	for(var i = 0; i< imgs.length; i++){
		var imgObj = new Image();
		imgObj.src = Dir+imgs&#91;i&#93;;
			alert(imgObj.src);
	}
}
window.onload = function(){ preload("./", &#91;"d_down.gif","d_over.gif"&#93;) }

$(function (){
	//マウスが乗ったら…
	$('form :image').mouseover(function() {
		//up画像
		var upimgSrc = $(this).attr("src");
		//over画像
		var overimgSrc = upimgSrc.replace("up", "over");
		//down画像
		var downimgSrc = upimgSrc.replace("up", "down");
		//over画像に入れ替え
		$(this).attr("src", overimgSrc);
		//念のためアップ画像をバックグラウンドに設定
		$(this).css("background-image", "url("+upimgSrc+")");
		//マウスが押されたら…
		$(this).mousedown(function() {
			//down画像に入れ替え
			$(this).attr("src", downimgSrc);
			//マウスアップしたら…
			$(this).mouseup(function() {
				//up画像に入れ替え
				$(this).attr("src", upimgSrc);
			});
		});
		//マウスが外れたら…
		$(this).mouseout(function() {
			$(this).attr("src", upimgSrc);
		});
	});
});
</script>

ボタンに使う画像は「○○○_up.gif」「○○○_over.gif」「○○○_down.gif」と「○○○」部分を同じにしておきます。HTML側では「type=image」で「○○○_up.gif」を指定します。

<input type="image" alt="ボタン" width="206" height="106" src="./d_up.gif" />

ポイントはボタンに使う画像をプリロードしておくこと。プリロードしておくことでアクションが起こってから読み込むタイムラグをなくします。

あとはクリックしたときの点線を消したいけど、IEでは無理みたいなので仕方がない。一応サンプルではCSSで「outline: none;」を指定しているのでFirefoxでは点線はでません。

まあ点線が出た方がクリックした安心感はでるので、ここはよしとしておきましょう。

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

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