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

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

前々回のお話

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のクラス名’
});

まとめ

だいぶ長くなりましたが、大体は間違っていないはずです。
(動作確認しながら確認はしました)
動作確認用のHTMLも設定の数分作ったので、
そのうち公開できたらもっとわかりやすくなるのかなと思いつつ、
どこに貼り付けようかというのも悩んでいます。

動作確認しながら書きましたが、間違いなどあった場合は、
コメントよりご指摘いただけると幸いです。
日本語も稚拙でわかりづらいところもあるかもしれません、
適宜校閲してアップデートしていきます。

今回はここまで!!!
それでは!

スポンサーリンク