imgViewer2.jsの揺れ – しすこん

Javascriptで画像を拡大縮小できる便利なツールがある。
以下のサイトから入手出来るimgViewer2.jsだ。
imgViewer2
デモはここ。
非常に優れたツールだが、特定の条件で微妙に画面が揺れる現象があり、少々難儀する。
以下は1198×730ピクセルのpng画像をGoogle Chromeで表示する場合だ。
これをChromeブラウザが最大化した状態でクリックしてみてくれ。
最大化で画像が揺れる
微妙に画面が左右に揺れる現象が確認できるだろう。

特定の条件の元、Chromeだけの現象なので諦めていたのだが、海外の掲示板で解決策が掲示されていた。
ありがたい。
window.loadのimgViewer2インスタンス生成時にsetZoomで倍率を明示させる方法だ。
こんなかんじ。

<script>
(function($) {
  $(window).on("load", function() {
    document.title = "揺れのテスト";
    document.getElementById("image_screen").src = document.getElementById("image_print").src = "WelcomeScan_60.png";
    var $img = $("#image_screen").imgViewer2();
  });
})(jQuery);
</script>

<title>map viewer</title>
</head>
<body>
  <div class="image_wrapper no_print">
    <img id="image_screen" class="image_map" />
  </div>
  <div class="image_wrapper no_screen">
    <img id="image_print" />
  </div>
</body>

6行目でimgViewer2を生成しているが、これを以下の通り変更する。
変更前。

var $img = $("#image_screen").imgViewer2();

変更後。

var $img = $("#image_screen").imgViewer2(
  {
    onReady: function() {
      this.setZoom(2);
      this.setZoom(1);
    }
  }
);

以下が改修後のデモだ。
最大化で画像が揺れる現象を改善
今度は揺れない。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル