ダウンロード

埋め込み

常に最新

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/scope.min.js" ></script>

1.0.2

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/scope.1.0.2.min.js" ></script>

1.0.1

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/scope.1.0.1.min.js" ></script>

1.0.0

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/scope.1.0.0.min.js" ></script>

必要なライブラリ

jQuery

ライブラリ内でのjQueryの利用範囲
  • DOM要素の取得
  • スタイルの設定
  • イベントハンドラの登録

概要

Scopeは一つの画像の全体と部分拡大を同時に参照したい時に有効です。

画像全体を表示するサムネイルと拡大する箇所を示すスコープ、拡大した部分を表示するビューの3つの要素で構成されています。サムネイルとビューを表す要素のid属性値を指定するとスコープをなる要素は自動的に挿入されます。

スコープをスワイプすることでビューに表示される内容も合わせて変化しますが、設定で切ることもできます。また、スコープ位置に変化があった時のコールバック関数の登録や、JavaScriptでスコープの位置を指定する関数を使うこともできます。

各要素の大きさの指定は、サムネイルの横幅(高さは画像のアスペクト比から計算されます)とビューの幅と高さ、画像に対するスコープの幅の比率を指定します。まず画像とスコープの比率を考えて次にビューの大きさとアスペクト比、最後にサムネイルの大きさを決定していくと比較的簡単に設定することができます。

1.0.2
  • deprecate対応
1.0.1
  • 各コールバック関数内からthis指定でscopeオブジェクトを取得することができます。

サンプル

画像サーチ

<div id="samp1_map" ></div>
<div id="samp1_view" ></div>
<div id="samp1_posi" ></div>
#samp1_view{
	display: inline-block;
	vertical-align: top;
	margin: 5px 0 0 5px;
}
#samp1_map{
	display: inline-block;
	vertical-align: top;
	margin: 5px 0 0 0;
}
#samp1_posi{
	display: inline-block;
	vertical-align: top;
	margin: 5px 0 0 10px;
	width: 550px;
}
.scp{
	cursor: pointer;
	background-color: rgba(255,255,255,0.7);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
}
//以下をscriptのjqueryロード後の処理に記述します
var samp1 = new Scope({
	id:'samp1_view',
	samid:'samp1_map',
	src:'img/field.png',
	scopeclass:'scp',
	usetranslate:1,
	scoperate:0.4,
	viewheight: 120,
	viewwidth: 150,
	samwidth: 70});
samp1.setOnMove(function(sl, st, il, it){
	$('#samp1_posi').html('left:'+sl+' top:'+st+' imgleft:'+il+' imgtop:'+it);
});

部分拡大

<div id="samp2fld">
	<div id="samp2_map"></div>
	<div id="samp2_v1"></div>
	<div id="samp2_v2"></div>
	<div id="bar1"></div>
	<div id="bar2"></div>
</div>
#samp2fld{
	position: relative;
	width: 800px;
	height: 220px;
	background-color: rgba(150,150,150,0.5);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
}
#samp2_map{
	position: absolute !important;
	left: 220px;
	top: 30px;
}
#samp2_v1{
	position: absolute !important;
	left: 10px;
	top: 10px;
}
#samp2_v2{
	position: absolute !important;
	left: 470px;
	top: 10px;
}
#bar1{
	border-top: solid 1px #FFFFFF;
	width: 50px;
	height: 1px;
	position: absolute;
	left: 210px;
	top: 50px;
}
#bar2{
	border-top: solid 1px #FFFFFF;
	width: 80px;
	height: 1px;
	position: absolute;
	left: 391px;
	top: 100px;
}
.scp2{
	background-color: rgba(255,255,255,0.3);
	border: solid 1px #FFFFFF;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
}
//以下をscriptのjqueryロード後の処理に記述します
var samp21 = new Scope({
	id:'samp2_v1',
	samid:'samp2_map',
	scopeid: 'samp2_scope1',
	src:'img/lunch.jpg',
	scopeclass:'scp2',
	usetranslate:0,
	scoperate:0.4,
	viewheight: 110,
	viewwidth: 200,
	samwidth: 240,
	fixedview: true});
samp21.moveScope(40, 10);
var samp22 = new Scope({
	id:'samp2_v2',
	samid:'samp2_map',
	scopeid: 'samp2_scope2',
	src:'img/lunch.jpg',
	scopeclass:'scp2',
	usetranslate:0,
	scoperate:0.5,
	viewheight: 200,
	viewwidth: 300,
	samwidth: 240,
	fixedview: true});
samp22.moveScope(50, 50);

設定

未指定:必須条件:文字列
id
ビューにする要素のid属性値を指定します。idのない要素をビューにすることはできません。
未指定:必須条件:文字列
samid
サムネイルにする要素のid属性値を指定します。idのない要素をサムネイルにすることはできません。
未指定:samid + '_scope'条件:文字列
scopeid
スコープにする要素のid属性値を指定します。コンストラクタ呼び出し時に同じid属性値を持つ要素があった場合はスコープの追加を行いません。
未指定:id + '_image'条件:文字列
imgid
ビュー内の画像にする要素のid属性値を指定します。コンストラクタ呼び出し時に同じid属性値を持つ要素があった場合はスコープの追加を行いません。
未指定:samid + '_image'条件:文字列
samimgid
サムネイル内の画像にする要素のid属性値を指定します。コンストラクタ呼び出し時に同じid属性値を持つ要素があった場合はスコープの追加を行いません。
未指定:必須条件:文字列
src
scopeで使用する画像ファイルのパスを指定します。
未指定:0条件:0->left,top使用 1->translate3d使用
usetranslate
位置指定にleft,topを使った座標指定を使う場合は「0」を、translate3dを使ったアニメーションを行うには「1」を指定します。ただし、デフォルト設定ではAndroid3以下とiPhone OS 4、operaやieでは自動的に「0」の設定となります。これらでもtranslate3dを使う場合は合わせてautotranslatemodeを変更してください。
未指定:0.2条件:0より上で1より下の数値
scoperate
サムネイルの横幅に対するスコープの横幅の割合を指定します。
未指定:''条件:文字列
imageclass
ビューに表示される画像にあてるclass名を指定します。
未指定:''条件:文字列
samimageclass
サムネイルに表示される画像にあてるclass名を指定します。
未指定:''条件:文字列
scopeclass
スコープにあてるclass名を指定します。
未指定:0条件:0->全て 1->マウス 2->タッチ
handlemode
使用するイベントハンドラを決定します。これが0の状態だとマウスとタッチ両方のイベントを拾うので、Android4.1の標準ブラウザなどでイベントハンドラが重複して発動し、独自でclickイベントハンドラなどを追加していると2回動作することがありますので注意してください。
未指定:true条件:true|false
autotranslatemode
trueに設定するとtranslate3dに問題があるAndroid3以下とiPhone OS 4、operaやieでusetranslateが自動的に「0」の設定となります。falseにすれば指定したusetranslateのとおりの処理を行います。
未指定:false条件:true|false
fixedview
スコープをスワイプで移動させないかどうかを指定します。trueに設定するとスワイプでスコープ位置を変更できなくなります。
未指定:必須(CSSで指定してもよい)条件:1以上の整数
viewheight
ビューの高さを指定します。scopeが正常に動作するためには必須の指定ですが、別途CSSで設定しても問題ありません。
未指定:必須(CSSで指定してもよい)条件:1以上の整数
viewwidth
ビューの幅を指定します。scopeが正常に動作するためには必須の指定ですが、別途CSSで設定しても問題ありません。
未指定:必須(CSSで指定してもよい)条件:1以上の整数
samwidth
サムネイルの幅を指定します。scopeが正常に動作するためには必須の指定ですが、別途CSSで設定しても問題ありません。
未指定:-条件:-
setOnMove(function(scopeleft, scopetop, imageleft, imagetop){})
引数にコールバック関数を指定することで、スコープの位置が変わるたびに実行される処理を記述することができます。ただし、Android3系以下ではmousemoveがスムーズでないため、これらの端末が対象になる場合はあまり思い処理を書かない方が無難です。引数はそれぞれscopeleft: サムネイル内のスコープの左からの座標位置、scopetop: サムネイル内のスコープの上からの座標位置、imageleft: ビュー内の画像の左からの座標位置、imagetop: ビュー内の画像の上からの座標位置
未指定:-条件:-
moveScope(left, top)
指定した位置にスコープを移動します。