ImageViewer
jQuery Plugin

概要

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

サンプル

変更履歴

  • 2021年04月8日 バージョン1.0.0(初版)リリース

ライセンス

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");
引数 無し