SQLの窓

2014年03月28日


jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する

ウインドウは、画像がデスクトップの解像度を超える場合の動作は、ブラウザによって違うので、確実に表示できる大きさの画像を指定するのがいいです。いずれにしても、一旦画像をロードしてサイズを取得するので、無駄に大きいものは良くありません。

ウインドウは、計算でデスクトップ中央に表示されます。そのあたりの位置はプラグイン内で変更できます。また、要素に data- で属性として目的の画像をセットするような仕様にするのは簡単ですが、IE の古いブラウザの場合は、コードで対応する必要があります。しかし、現在ではその対応はあまり意味が無いので具体的な記述はしていません。( この記事の最後に、IE 全てに対応し、セレクタで一括指定できるようにしたコードを掲載しました )

IE の場合は、仕様の為か、周りに余白ができます。もうちょっと作りこめば、それもどうにかできますが、画像を表示したいだけなのでこれで十分だと思います。
画像は、Picasa の画像を使用しているので URL が長くなっています。Picasa の画像は、サーバー側でサムネイルを作成できるので、このような場合に便利ですが、長い URL を避けたい場合、Google の URL 短縮を 画像の URL に対して行うといいです。

関連する記事

Picasa のサムネイルの使い方
イメージユニット作成サービス / window.open と Lightbox2 と Shadowbox

<script>
// jQuery ロード部分
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<script>
// プラグインインストール部分
$.fn.extend({ 
	setOpenImage: function(url){
		var jq = this;
		var obj = new Image();
		$( obj ).load(function(){
			var __h = this.naturalHeight || this.height;
			var __w = this.naturalWidth || this.width;
			jq.css("cursor", "pointer").click(function(){
				window.open( url,
					"",
					"width="+__w+",height="+__h+",resizable=1,left="+(screen.width-__w)/2+",top="+(screen.height-(__h+100))/2)
			});
		});
		$( obj ).prop( "src", url );
	}
});
</script>

<script>
// ロード後の実装部分
$(function(){
	$("#open_target_1").setOpenImage("https://lh4.googleusercontent.com/-1hrl6J4BkAI/UmfOlBCk8VI/AAAAAAAAQ08/2QbL_BEtAjA/s900/UrbanFuture3_1.jpg");
	$("#open_target_2").setOpenImage("https://lh4.googleusercontent.com/-ivV-h9giVL0/Ul7TtLhF37I/AAAAAAAAQvk/AQJamcu3-mc/s640/ub3_lights.jpg");
});
</script>

<img id="open_target_1" src="https://lh4.googleusercontent.com/-1hrl6J4BkAI/UmfOlBCk8VI/AAAAAAAAQ08/2QbL_BEtAjA/s400/UrbanFuture3_1.jpg">
<img id="open_target_2" src="https://lh4.googleusercontent.com/-ivV-h9giVL0/Ul7TtLhF37I/AAAAAAAAQvk/AQJamcu3-mc/s200/ub3_lights.jpg">

カスタム属性とクラスで一括指定

IE に対する対応は、かなり特殊なので省いてもいいのですが、IE9 と IE10 の時代で outerHTML から属性を取得する処理が必要で、この処理はひょっとすると、他の実装にも役立つかもしれません。

それより何より、HTML の要素に記述する事によって、each 処理で、セレクタによる全ての要素に一括対応ができるようになります。これが一番実質的に意味があるので作成してみました。( 最初のコードでもセレクタによる一括指定はできますが、一つの指定で指定できる画像は一つです )

さらに読みやすくする為に、Google の URL短縮 を実際に使用しています。
<script>
// jQuery ロード部分
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<script>
// プラグインインストール部分
$.fn.extend({ 
	setOpenImageAll: function(url){
		this.each(function(idx,elm){

			var jq = $(elm);
			var img_url = url;
			if ( typeof jq[0].dataset !== 'undefined' ) {
				img_url = jq[0].dataset.image;
			}
			if ( typeof jq[0]["data-image"] !== 'undefined' ) {
				img_url = jq[0]["data-image"];
			}
			if ( typeof img_url === 'undefined' ) {
				var wk = jq[0].outerHTML;
				var wk2 = wk.match(/data-image=\"([^"]+)\"/);
				img_url = wk2[1];
			}
			var obj = new Image();
			$( obj ).load(function(){
				var __h = this.naturalHeight || this.height;
				var __w = this.naturalWidth || this.width;
				jq.css("cursor", "pointer").click(function(){
					window.open( img_url,
						"",
						"width="+__w+",height="+__h+",resizable=1,left="+(screen.width-__w)/2+",top="+(screen.height-(__h+100))/2)
				});
			});
			$( obj ).prop( "src", img_url );

		});
	}
});
</script>

<script>
// ロード後の実装部分
$(function(){
	$(".open_image").setOpenImageAll();
});


</script>
<img class="open_image" src="http://goo.gl/kbi8oV" data-image="http://goo.gl/7vItxm">
<img class="open_image" src="http://goo.gl/Dl1Lrv" data-image="http://goo.gl/ZYx6VC">
img_url = jq[0]["data-image"]; は、IE8 以前の対応です。昔の IE は、HTML で書いた属性がそのままプロパティとして実装される仕様でした。ですから、obj.data-image というプロパティが実際に作成されています。しかし、参照する場合、プロパティに -( ハイフン ) は使え無いので、jq[0]["data-image"] という文字列での表現で利用します。

さらに、IE9 と IE10 で、この仕様が無くなったのですが、IE11 でやっと、カスタム属性が利用可能になります。そこで、IE9 と IE10 のみ、outerHTML から文字列を取得して、正規表現で書かれている URL を取得しています。

関連する記事

IE11 から利用可能になったカスタムデータ属性(datasetプロパティ)


タグ:IE jquery dataset
【プラグイン作成(jQuery)の最新記事】
posted by lightbox at 2014-03-28 15:21 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり