【jQuery】jQueryで画像ズーム機能を実装する方法 zoomsl-3.0.jsのAPI仕様

1月 4, 2018

どうも、jQueryの解析で死にそうになったタツノコです。
だいぶ時間がかかりました。

1. jQuey プラグインzoomsl-3.0.jsのAPI仕様について
2. imgタグに設定できる内容(なくても動きます)
3. プラグイン呼び出し時の初期設定オプション
4. まとめ

jQuey プラグインzoomsl-3.0.jsのAPI仕様について

「SergeLand Image Zoomer v3.0」で、公開している
Amazonのようなズーム機能をjQueryのプラグインで実装できる「zoomsl-3.0.js」

上記プラグインの紹介と簡単な使い方の説明を書きましたが、
「日本語訳のAPI仕様が探してもない！」
ということだったので、当サイト主が簡単に解析して一覧にまとめました。
※解説が稚拙なのは本当に申し訳ございません。
構成は逐一修正していく予定です。

原文のページはこちら

imgタグに設定できる内容(なくても動きます)

指定できる属性	説明	例
data-large	拡大する画像デフォルト値：src属性に指定している画像	<img src="./image/test.png" data-large="./image/test.png">
data-title	ツールチップの文言	<img src="./image/test.png" data-title="ツールチップに表示させたい文言">
data-help	ヘルプの文言 ※ツールチップとほぼ変わらない	<img src="./image/test.png" data-help="ツールチップに表示させたい文言">
data-text-bottom	拡大画像の下部に現れるツールチップの文言	<img src="./image/test.png" data-text-bottom="拡大画像の下に表示させたい文言">

プラグイン呼び出し時の初期設定オプション

画像読み込み時の挙動

指定するオプション	説明	デフォルト	設定例
loadinggif	大きな画像を読み込むときに、読み込み中の間に表示される画像 ※画像データは「gif」のみ許容	なし	$('imgタグのセレクタ').imagezoomsl({ loadinggif : './gif/load.gif' });
loadopacity	画像のロードが完了するまでの間の画像の透過度 ※CSSの「opacity」と同様、但し「画像のロードが完了するまでの間のだけに適用される」	0.1	$('imgタグのセレクタ').imagezoomsl({ loadopacity:0.5 });
loadbackground	画像のロードが完了するまでの間の画像のバックグラウンド ※CSSの「background」と同様、但し「画像のロードが完了するまでの間のだけに適用される」	＃878787	$('imgタグのセレクタ').imagezoomsl({ loadbackground,'#ffffff' });

カーソル領域の設定

指定するオプション	説明	デフォルト	設定例
cursorshade	true:カーソル領域を表示する false:カーソル領域を表示しない	true	カーソルの拡大領域を表示しない時 $('imgタグのセレクタ').imagezoomsl({ cursorshade :false });
magnifycursor	画像にカーソルを当てた時のカーソルの形状 ※CSSの「cursor」と同様の値を設定	crosshair	カーソルを指にしたい場合 $('imgタグのセレクタ').imagezoomsl({ magnifycursor: 'pointer' });
cursorshadecolor	カーソルの領域の背景色	#fff	カーソルの領域背景を赤にしたい場合 $('imgタグのセレクタ').imagezoomsl({ cursorshadecolor : '#FF0000' });
cursorshadeopacity	カーソル領域自体の透明度。 0〜1の間で「0.1」刻みで設定数値が低いほど透明度が上がる。	0.3	カーソルの領域の透明度を透明にしたい場合 $('imgタグのセレクタ').imagezoomsl({ cursorshadeopacity : 0 });
cursorshadeborder	カーソル領域の枠線の設定 ※CSSの「border」と同様の値を設定	1px solid black	カーソルの領域枠線を 3pxの太さ、二重線、赤色にしたい場合 $('imgタグのセレクタ').imagezoomsl({ cursorshadeborder : '3px double #FF0000' });
stepzoom	マウスホイールをスクロールするときのズームステップ範囲内の値を設定 0- ∞	0.5	拡大・縮小の単位を0.1刻みにする $('imgタグのセレクタ').imagezoomsl({ zoomrange: [1, 10], stepzoom : 0.1 });
zoomrange	ズームの、最小・最大の設定 [最小,最大]	[ 2、2 ]	ズームの幅を1倍〜10倍にする $('imgタグのセレクタ').imagezoomsl({ zoomrange: [1, 10], });
zoomstart	ズームの開始倍率	2	ズームの開始倍率を5倍からスタート $('imgタグのセレクタ').imagezoomsl({ zoomrange: [1, 10], zoomstart:5, });
disablewheel	カーソルが小さな画像の上にあるとき、ズーム範囲が指定されていないとき、マウスホイールで文書をスクロールすることを無効にする zoomrange[начало] == zoomrange[конец]	true	調査中

ツールチップ

指定するオプション	説明	デフォルト	設定例
showstatus	小さな画像の上にマウスを移動するとヒントが表示されます	true	調査中
showstatustime	ツールチップの表示時間(ミリ秒) ※imgタグの属性に「data-title」または「data-help」を指定した時のみ有効	2000	ツールチップの表示時間を「30秒(3000ミリ秒)」に設定 $('imgタグのセレクタ').imagezoomsl({ showstatustime : 30000 });
statusdivborder	ツールチップの枠線の設定 ※CSSの「border」と同様の値を設定	1px solid black	ツールチップの領域枠線を 3pxの太さ、二重線、赤色にしたい場合 $('imgタグのセレクタ').imagezoomsl({ statusdivborder : '3px double #FF0000' });
statusdivbackground	ツールチップの背景の設定 ※CSSの「background」と同様の値を設定	＃C0C0C0	ツールチップの背景を赤色にしたい場合 $('imgタグのセレクタ').imagezoomsl({ statusdivbackground : '#FF0000' });
statusdivpadding	ツールチップ内の文字自体の上下左右の空白間隔設定 ※CSSの「padding」と同様の値を設定	4px	ツールチップのpadding設定を10pxにする $('imgタグのセレクタ').imagezoomsl({ statusdivpadding : '10px' });
statusdivfont	ツールチップのフォントの設定 ※CSSの「font」と同様の値を設定	bold 13px Arial	ツールチップの文字フォントを20px、太字、Arialにする $('imgタグのセレクタ').imagezoomsl({ 'bold 20px Arial' });
statusdivopacity	ツールチップ自体の透明度を設定 0-1の範囲で設定小さいほど透明度が上がる	0.8	ツールチップの透明度を0.2(ほぼ透明)にする $('imgタグのセレクタ').imagezoomsl({ statusdivopacity : 0.2 });

拡大画像の設定

指定するオプション	説明	デフォルト	設定例
magnifierpos	拡大画像を元の画像の左右どちらかに出すかを設定 ※表示範囲を超えてしまっている場合、固定で右側になる。	right	拡大画像の表示位置を画像の左側に出す $('imgタグのセレクタ').imagezoomsl({ magnifierpos: 'left' });
magnifiersize	拡大画像の表示サイズ [幅,高さ]で指定（単位はピクセル）	[ 500,500 ] ※正確な数値ではなく大体このくらい。調査中	拡大画像を表示する領域を幅:250ピクセル、高さ:300ピクセルにする $('imgタグのセレクタ').imagezoomsl({ magnifiersize : [250,300] });
magnifiereffectanimate	拡大画像の出現時のアニメーション fadeIn：フェードイン showIn：ズームアップ slideIn：スライドイン	showIn	拡大画像の表示アニメーションをスライドインさせる $('imgタグのセレクタ').imagezoomsl({ innerzoom: false, magnifiereffectanimate : 'slideIn' });
innerzoom	元画像の上で拡大させるか、別の場所に拡大画像を表示するか true:カーソルを合わせた画像の上で拡大させ、尚且つ全体を拡大 false:拡大画像を元の画像の横に出す。	false	元画像の上で拡大させる $('imgタグのセレクタ').imagezoomsl({ innerzoom: true });
innerzoommagnifier	元画像の上で拡大させるか、別の場所に拡大画像を表示するか true:カーソルを合わせた画像の上で拡大させ、一部分を拡大 false:拡大画像を元の画像の横に出す。	false	元画像の上で拡大させる $('imgタグのセレクタ').imagezoomsl({ innerzoommagnifier: true });
descarea	翻訳調査中	なし	調査中
zindex	拡大画像のzindex	なし	拡大画像のz-indexを999にする $('imgタグのセレクタ').imagezoomsl({ zindex:999 });
leftoffset	拡大画像した画像と、元画像の表示位置の間の余白 zoomindex,innerzoommagnifierの値がfalseのとき、尚且つ magnifierposが'left'の時のみ有効	15	拡大画像と、元の画像の表示間隔を500px $('imgタグのセレクタ').imagezoomsl({ leftoffset: 500 });
rightoffset	拡大画像した画像と、元画像の表示位置の間の余白 zoomindex,innerzoommagnifierの値がfalseのとき、尚且つ magnifierposが'right'の時のみ有効	15	拡大画像と、元の画像の表示間隔を500px $('imgタグのセレクタ').imagezoomsl({ rightoffset: 500 });
switchsides	コンテナが表示されているときに画面の端が考慮され、ディスプレイに十分なスペースがない場合、コンテナは小さな画像の反対側に表示されます	true	調査中
magnifierborder	拡大画像の枠線の設定 ※CSSの「border」と同様の値を設定	1px solid black	拡大画像の領域枠線を 3pxの太さ、二重線、赤色にしたい場合 $('imgタグのセレクタ').imagezoomsl({ magnifierborder : '3px double #FF0000' });

属性：data-text-bottomのスタイル設定

指定するオプション	説明	デフォルト	設定例
textdnbackground	テキスト（拡大画像の下に表示されるテキスト）の背景色を設定 ※imgタグの属性「data-text-bottom」が設定されている場合のみ有効	#fff	拡大画像のツールチップの背景色を赤色にしたい場合 $('imgタグのセレクタ').imagezoomsl({ textdnbackground : '#FF0000' });
textdnpadding	テキスト（拡大画像の下に表示されるテキスト）内の文字自体の上下左右の空白間隔設定 ※CSSの「padding」と同様の値を設定 ※imgタグの属性「data-text-bottom」が設定されている場合のみ有効	10px	拡大画像のツールチップの背景色を赤色にしたい場合 $('imgタグのセレクタ').imagezoomsl({ textdnpadding: '500' });
textdnfont	テキスト（拡大画像の下に表示されるテキスト）のフォントの設定 ※CSSの「font」と同様の値を設定	13px/20px cursive	ツールチップの文字フォントを20px、太字、Arialにする $('imgタグのセレクタ').imagezoomsl({ textdnfont: 'bold 20px Arial' });

アニメーションの速度

指定するオプション	説明	デフォルト	設定例
scrollspeedanimate	大きな画像をスクロールし、範囲内の整数値と小数値を取ります 1- ∞	5	調査中
zoomspeedanimate	ズームは範囲内の整数値と小数点値を取ります 1- ∞	7	調査中
loopspeedanimate	カーソル領域の速度とマウスポインタの移動速度の差異の設定数値が大きいほど、カーソル領域が遅れて動く設定値：1〜上限なし	2.5	カーソル領域がかなりゆっくり動く $('imgタグのセレクタ').imagezoomsl({ loopspeedanimate: 100 });
magnifierspeedanimate	拡大画像が表示されるスピードミリ秒で設定する。	350	拡大画像が10秒かけてゆっくり表示される $('imgタグのセレクタ').imagezoomsl({ magnifierspeedanimate: 10000 });

CSSを使いたい場合

指定するオプション	説明	デフォルト	設定例
classmagnifier	拡大画像に当てたいCSSのクラス名 ※「magnifierborder」に充てたスタイルは無視されます。	magnifier	$('imgタグのセレクタ').imagezoomsl({ classmagnifier: ’当てたいCSSのクラス名’ });
classcursorshade	カーソル領域に当てたいCSSのクラス名 ※「cursorshadeborder, cursorshadeopacity, cursorshadecolor」に充てたスタイルは無視されます。	cursorshade	$('imgタグのセレクタ').imagezoomsl({ classcursorshade: ’当てたいCSSのクラス名’ });
classstatusdiv	ツールチップに当てたいCSSのクラス名 ※「tatusdivborder, statusdivbackground, statusdivpadding, statusdivfont, statusdivopacity」に充てたスタイルは無視されます。	statusdiv	$('imgタグのセレクタ').imagezoomsl({ classstatusdiv: ’当てたいCSSのクラス名’ });
classtextdn	テキスト（拡大画像の下に表示されるテキスト）に当てたいCSSのクラス名 ※「textdnbackground, textdnpadding, textdnfont」に充てたスタイルは無視されます。	textdn	$('imgタグのセレクタ').imagezoomsl({ classtextdn: ’当てたいCSSのクラス名’ });