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 | このブログの読者になる | 更新情報をチェックする