画像クリック時のjquery

画像をクリックした時に拡大表示させるjavascriptは『画像クリック時のjavascript』で作って、これにスクロールしただけで拡大表示画像を閉じるようにしたのが『続、画像クリック時のjavascript』。

投稿に画像を挿入するときにフックを使ってjavascriptのコマンドを付加させたりといろいろ面倒な事をやっていたんですが、jqueryを使えば全然簡単に出来てしまいます。ただし、WordPressで使うなら$を全てjQueryに変えなければいけない。

$(function(){
	$("#upimage").fadeOut();

	var showflg=0;
	$(".post a img").click(function(){
		var tarsrc=$(this).attr("src");
		tarsrc=tarsrc.substring(0,tarsrc.lastIndexOf("-5"))+".jpg";
		var img=new Image();
		img.onload=function(){
			var tarhei=img.height;
			var tarwid=img.width;
			var winhei=$(window).height();
			var winwid=$(window).width();
	
			var bwhresio=winwid/winhei;
			var iwhresio=tarwid/tarhei;
	
			if(bwhresio>iwhresio){
			    var imghei=winhei*0.85;
				if(imghei>960){
					imghei=960;
				}
			    var imgwid=imghei*tarwid/tarhei;
			}else{
			    var imgwid=winwid*0.8;
				if(imgwid>1280){
					imgwid=1280;
				}
			    var imghei=imgwid*tarhei/tarwid;
			}
	
			imgwid=imgwid+"px";
	
			imghei=imghei+"px";
	
			$("#upimage").css({width:imgwid,height:imghei});
			$("#upimage").attr("src",tarsrc);
			$("#imageframe").css("visibility","visible");
			$("#upimage").fadeIn("slow");
		}
		img.src=tarsrc;
		showflg=1;

		var tarips=$("[name='testword']").val();
		var altsrc="-"+$(this).attr("alt");
		var strsends=tarsrc+altsrc+":"+tarips;
		var urls="http://strix.main.jp/～/logimage.php";
		$.post(urls, 
			{target:strsends}
		);

		return false;
	});

	$(window).scroll(function(){
		if(showflg==1){
			erasepop();
		}
	});

	$("#upimage").click(function(){
		erasepop();
	});
	
	function erasepop(){
		$("#upimage").fadeOut("slow");
		setTimeout(function(){
			$("#imageframe").css("visibility","hidden");
		},300);
		showflg=0;
	}
});

ちなみに、いつもはhiddenで拡大表示するときにvisibleにするそれ用の隠しdivは、以下のようにしてます。

<div id="imageframe">
	<p id="explain">画像をクリックすると元に戻ります。</p>
	<div id="popup">
		<img src="" id="upimage" alt="" />
	</div>
</div>

2行目のupimageは隠しdiv内にある目的となる画像のidです。
始めからcssにて透明度(opacity)を0に設定しておけばいいのですが、それをしていない場合はフェイドインさせるためにここで透明にしています。
5行目の$(".post a img")で投稿に挿入した画像を指定しています。
これで投稿に挿入される画像のコード自体に変更を施すことは全く必要なくなります。
6～30行目は画像の縦横のサイズから縦長か横長かを判断して、基準のサイズよりも大きい場合は基準のサイズに設定しています。
基準のサイズは1280×960で自分の環境に都合の良い数値にしているだけ。
ちなみに7行目は、ここの場合、通常表示されている画像はミディアムサイズでファイル名に”-500x375”という文字列を含んでいるので、元のファイル名を得るためにそのサイズ文字列を取り除いています。
9行目のimg.onload=function(){としているのは、サイズを計算する処理を画像のロードが終わってからさせるための処理です。
41行目のimg.src=tarsrc;で後で画像のurlを指定することが重要とのこと。

≪ jQueryにおけるXMLHttpRrequest ≫

44～50行目は『画像をクリックした時のログ』のページで作った画像をクリックしたときのログを残す処理。
記録したいデータとしてはip addressとページのurlなんですが、javascriptではアクセスしているページのurlはlocation.hrefで得られますが、ip addressは得られないと思うので、元のページにおいてphpであらかじめhidden属性のinput要素に仕込んでおいたものを、41行目で取得しています。input要素のnameがtestwordということです。
45行目は画像が何の画像かわかりやすくするためにalt属性を取得しています。
で、46行目で送信するデータを作成し、47行目が送信先のファイルとなります。
48～50行目が実際にpostにて送信する処理の部分。
この場合、送信するだけで受信する必要がないのでたったこれだけのこと。
getでもpostでも同じでgetで送信するならpostをgetに置き換えるだけ。
javascriptにおけるXMLHttpRrequestにおいてgetを使う場合は、たしかurlとパラメータを含めて送信できる長さに制限があったと思う。
一つ目の引数に送信先のファイルのurl。
二つ目の引数に送信するデータ。
このデータは複数指定することが出来て、たとえばここの場合送りたいデータをひとまとめにしているけど、

var ipstr="127.0.0.1";
var urlstr="http://strix.mai.jp/";
var altstr="Bullfinch";
var imgurl="http://strix.main.jp/0001.jpg";

$.post(urls, 
	{ip:ipstr,url:urlstr,alt:altstr,img:imgurl}
);

とすれば、それぞれpostなら、

$_POST['ip']
$_POST['url']
$_POST['alt']
$_POST['img']

で受け取ることが出来て、後で分けなくて済む。

53～59行目は閉じるための処理の関数で、スクロールした時と画像をクリックした時にこの関数を呼ぶようにしています。

jqueryはやっぱり便利です。

≪ jQueryにおけるXMLHttpRrequest ≫

Leave a Reply！ コメントをキャンセル

Leave a Reply！コメントをキャンセル