ImageViewerjQuery Plugin

概要

Webページに画像をスケーラブルに表示する機能を簡単に組み込む事が出来るjQueryプラグインです。

サンプル

変更履歴

ライセンス

BSD2

主な機能

導入方法

1.下記ライブラリをダウンロードする。

jquery-k2go-image-viewer.js
ダウンロード
License.txt
ダウンロード

2.jquery（Ver3.4.1以上）とダウンロードしたライブラリをHTMLファイルへ組み込む。

例 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="jquery-k2go-image-viewer.js"></script>
</head>
<body>
  ・・・
</body>
</html>

3.windowオブジェクトのload完了後、組み込みたい画像要素へ実装する。

例 
$(window).on("load", function()
{
  $(セレクタ).k2goImageViewer(オプション);
});

オプション

名前 型 初期値 説明
rate Number 0.1 画像を拡大・縮小する各段階の倍率。値が小さい程、細かい段階でズームイン・アウトします。
maxWidth Number 画像サイズ（幅）×10 ズームインした際の最大サイズ（幅）。
maxHeight Number 画像サイズ（高さ）×10 ズームインした際の最大サイズ（高さ）。
minWidth Number 画像サイズ（幅）÷2 ズームアウトした際の最小サイズ（幅）。
minHeight Number 画像サイズ（高さ）÷2 ズームアウトした際の最小サイズ（高さ）。
move Function undefined ドラッグ（スワイプ）した際に呼び出されるコールバック関数です。
zoom Function undefined ズームした際に呼び出されるコールバック関数です。
コンストラクタの例 
$(セレクタ).k2goImageViewer(
{
  rate      : 0.1,
  maxWidth  : $(セレクタ).get(0).naturalWidth  * 10,
  maxHeight : $(セレクタ).get(0).naturalHeight * 10,
  minWidth  : $(セレクタ).get(0).naturalWidth  /  2,
  minHeight : $(セレクタ).get(0).naturalHeight /  2,
  move      : function(pThis){ console.log("move"); },
  zoom      : function(pThis){ console.log("zoom"); }
});

メソッド

setOptions

説明 オプションの設定変更を行います。
構文 $(セレクタ).k2goImageViewer("setOptions", 引数);
引数 変更したいオプション値を含むObject
戻り値 jqueryオブジェクト
実装例 
$(セレクタ).k2goImageViewer("setOptions",
{
  rate      : 0.5,
  maxWidth  : 1000,
  maxHeight : 1000
});

getOptions

説明 オプション値を取得します。
構文 $(セレクタ).k2goImageViewer("getOptions");
引数 無し
戻り値 現在のオプション値を含むObject
実装例 
var options = $(セレクタ).k2goImageViewer("getOptions");

destroy

説明 当該要素に対しk2goImageViewerの組み込みを解除します。
構文 $(セレクタ).k2goImageViewer("destroy");
引数 無し