SQLの窓

2013年11月17日


jQuery プラグイン : Zoomooz.js の使いどころ

いくら考えても、画像の拡大しか思いつきません。( 一応、SyntaxHighlighter に使って見たら、結構いいかも )

画像の場合、大きい画像を指定しておいて、表示だけを幅指定等で小さくしておくと、拡大時にオリジナルの解像度の画像をできるだけ使ってくれるようです。( Google Chrome は結構気まぐれでした )

ただ、jQuery は Google のホスティングを使用するとして、Zoomooz.js は、自分の Google ドライブに webViewLink を作ってホスティングしてみました。

画像も、Google の Picasa を使っています。

Google さまさま。
▼ クリックすると、表示領域の 1.2倍になります( クリックすると元戻る )

★ 拡大したい要素には、class="zoomTarget" を設定します
★ 表示領域に対する拡大率は、data-targetsize="1.2" で指定します( 通常は 0.9 くらい )
★ 対象をクリックして元に戻したい場合は、data-closeclick="true"
( 省略した場合は、周りをクリックしたら元に戻ります / 1.2 だと画像でいっぱいになるので )

これらも含めて、jQuery で動的に指定できる内容が以下の通りですが、未確認です。
scalemode: "both"
duration: 450
easing: "ease"
nativeanimation: true
root: $(document.body)
debug: false
animationendcallback: null
preservescroll: false
( いずれもデフォルト値 )
▼ ソースが拡大されるのはこの程度の長さならいいかもしれません。
<script type="text/javascript">
if ( window[window.location.hostname+'.loadZoomooz'] !== true ) {
	window[window.location.hostname+'.loadZoomooz'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
	document.write("<"+"script src=\"https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery.zoomooz.min.js\"></"+"script>");
}
</script>
<pre>
▼ クリックすると、表示領域の 1.2倍になります( クリックすると元戻る )
<img
	id="img"
	class="zoomTarget"
	src="https://lh3.googleusercontent.com/-ulnfI0dn2Sg/UiXUpNDBy3I/AAAAAAAAQE8/XDo4nrrauFc/s1200/Hitomi_Dragon_Rider2.jpg"
	style="border: solid 0px #000000;width:600px;"
	data-targetsize="1.2"
	data-closeclick="true"
>
</pre>


同じ内容をjQuery で設定する場合は以下のようになります
(画像処理)
<script type="text/javascript">
if ( window[window.location.hostname+'.loadZoomooz'] !== true ) {
	window[window.location.hostname+'.loadZoomooz'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
	document.write("<"+"script src=\"https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery.zoomooz.min.js\"></"+"script>");
}
</script>
<script type="text/javascript">
$(function() {
	$.zoomooz.setup({targetsize:1.2, closeclick:true});
	$("#img").zoomTarget();
});
</script>
<pre>
▼ クリックすると、表示領域の 1.2倍になります( クリックすると元戻る )
<img
	id="img"
	src="https://lh3.googleusercontent.com/-ulnfI0dn2Sg/UiXUpNDBy3I/AAAAAAAAQE8/XDo4nrrauFc/s1200/Hitomi_Dragon_Rider2.jpg"
	style="border: solid 0px #000000;width:600px;"
>
</pre>
これは、複数の画像をクラスで一括対応する場合に便利です。

個別に拡大処理する場合は、zoomTo というメソッドがありますが、clickclose が使えないようなので、画面を元に戻すコントロールが難しいので、使い勝手が良くありません。

以下のような指定をした場合、拡大時に左端に空白がありますが、そこをクリックしても反応しません( これ以上の詳細はサンプルより読み取る事ができませんでした )

※ おそらく、対象を画面中央に設置する必要がありそうです。
<script type="text/javascript">
if ( window[window.location.hostname+'.loadZoomooz'] !== true ) {
	window[window.location.hostname+'.loadZoomooz'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
	document.write("<"+"script src=\"https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery.zoomooz.min.js\"></"+"script>");
}
</script>
<script type="text/javascript">

$(function() {
	$(".gallery").click(function(evt){
		evt.stopPropagation();
		$(this).zoomTo({targetsize:0.9});
	});
	$("body").click(function(evt){
		$(this).zoomTo({targetsize:1.0});
	});
});
</script>
<pre>
▼ クリックすると、表示領域の 1.2倍になります( クリックすると元戻る )
<img
	class="gallery"
	src="https://lh3.googleusercontent.com/-ulnfI0dn2Sg/UiXUpNDBy3I/AAAAAAAAQE8/XDo4nrrauFc/s1200/Hitomi_Dragon_Rider2.jpg"
	style="border: solid 0px #000000;width:600px;"
>

<img
	class="gallery"
	src="https://lh6.googleusercontent.com/-9sisURI-vgQ/UoeYuH5OzSI/AAAAAAAARPo/77clCKquRGg/s800/1384606249563722.jpeg"
	style="border: solid 0px #000000;width:600px;"
>

</pre>



posted by at 20:38 | jQuery | このブログの読者になる | 更新情報をチェックする


2013年11月15日


(callback.bind(this))(); で、無名 function で使用される this に this を引き継ぐ

具体的には、jQuery の要素のインスタンスのメソッドとしてプラグインを作成した場合、そのメソッドの引数を無名 function と想定した場合の処理です。

もっと言えば、プラグイン内の this は要素自身ですから、その this を外部の無名 function の this として使用できるようにする記述です。

bind メソッド

以下がプラグインの定義です。
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	$.extend( {_nav: $(navigator)[0].userAgent.toLowerCase()});
	$.fn.extend({
		StreetView : function(a,b){
			var pos = new google.maps.LatLng(a,b);
			$( this ).data( "pano", new google.maps.StreetViewPanorama($(this)[0],{ position: pos }) );
			return this;
		}, 
		StreetViewPov : function(a,b){
			var pov = {
				heading: a,  
				pitch: b 
			}
			$( this ).data( "pano" ).setPov(pov);
			return this;
		},
		_sh: function( callback ) {
			if ( $._nav.indexOf("iphone") > -1 || $._nav.indexOf("android") > -1 ) {
				(callback.bind(this))();
			}
			return this;
		},
		_pc: function( callback ) {
			if ( $._nav.indexOf("iphone") <= -1 && $._nav.indexOf("android") <= -1 ) {
				(callback.bind(this))();
			}
			return this;
		}
	});
}

_pc 内の this は、自分自身で、return する事によって、連鎖可能な jQuery のオブジェクトになります。これを、引数の callback の内部でも使えるように、(callback.bind(this))(); としています。

利用方法は以下のようになります。
<script src="http://winofsql.jp/jquery/plugins/street_view.js"></script>
<script>
$(function(){
	var pano = $('#pano')
	.StreetView(47.615471,1.518008)
	.StreetViewPov(-42.14,9.13)
	// スマホの処理
	._sh(function(){
		this.css("cssText","width:290px!important;height:290px!important");
	})
	// PC の処理
	._pc(function(){
		this
		.css("width","600px")
		.css("height","450px");
	});
});
</script>
<div id="pano"></div>

関連する記事

jQuery のプラグインとしてストリートビューを利用する(2)



posted by at 19:59 | JavaScript | このブログの読者になる | 更新情報をチェックする


2013年11月14日


jQuery プラグインを使った、ブログ用ストリートビュー『最短コード版』

『Google ストリートビューのパノラマを自分のブログに設置する方法』と、『ブログの記事部分でロードする為の jQuery 用のコード』の手法を使って最短コードにしました
<script src="http://winofsql.jp/jquery/plugins/street_view.js"></script>
<script>
$(function(){
	$('#pano')
	.StreetView(47.615471,1.518008)
	.StreetViewPov(-42.14,9.13)
	.css("width","600px")
	.css("height","450px");

});
</script>
<div id="pano"></div>

関連する記事

jQuery のプラグインとしてストリートビューを利用する(2)


posted by at 03:40 | jQuery | このブログの読者になる | 更新情報をチェックする