【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も設定の数分作ったので、
そのうち公開できたらもっとわかりやすくなるのかなと思いつつ、
どこに貼り付けようかというのも悩んでいます。
動作確認しながら書きましたが、間違いなどあった場合は、
コメントよりご指摘いただけると幸いです。
日本語も稚拙でわかりづらいところもあるかもしれません、
適宜校閲してアップデートしていきます。
今回はここまで!!!
それでは!
ディスカッション
コメント一覧
まだ、コメントがありません