はじめての画像 Zoom and pan jQuery プラグイン入門

画像の拡大・縮小（zoom：zooming ズーミング）と移動（pan：panning パンニング）を実装するZoom and pan jQuery プラグイン「e-smart-zoom-jquery.js」を紹介します。
jQueryプラグイン「e-smart-zoom-jquery.js」は、指定した画像の拡大や縮小(zoom - zooming)、および拡大した画像を移動するカメラのようなパン操作(pan - panning)を行うことができます。
このページの作成は、つぎのサイトを引用・参照しました。
画像の拡大・縮小と移動（パン）「pan and zoom 」

１インストール

プラグイン「e-smart-zoom-jquery.js」およびjQueryをつぎのサイトからsmartJQueryZoom-master.zipをダウンロードします。 GitHub smartJQueryZoom（「緑色Code」ボタンクリック→「Download Zip」クリック）。
smartJQueryZoom-master.zipを解凍後、srcフォルダ全体をサーバーへアップロードします。
srcフォルダの内容はつぎのとおりです。

２表示画像HTML

DIV領域（画像表示領域）の大きさは、横幅は画面いっぱいに、縦幅は「IMGタグ定義時の画像の高さ」になります。例えば、960X720(px)の画像をimgタグでwidth=600と指定した場合、縦幅（h:height)は、次のように計算します。
960：720=600：h → 縦幅h =720X600÷960=450px 。
画像表示領域のイメージは、、クイックデモ参照。

３ jQuery プラグイン「e-smart-zoom-jquery.js」の起動

jQuery プラグインを起動し、画像の拡大・縮小（zoom）と移動（pan）を実現します。プラグイン起動時は、上「表示画像HTML」のimgタグのid名を指定します。

基本機能＋起動オプション省略のイメージは、クイックデモ参照。

基本機能＋起動オプションありのイメージは、クイックデモ参照。

$(document).ready(function() {
 // プラグイン起動、全起動オプション
 $("#imageFullScreen").smartZoom(
        options = {
           'top' : '0', // zoom target container top position in pixel
           'left' : '0', // zoom target container left position in pixel
           'width' : '100%', // zoom target container width in pixel or in percent
           'height' : '100%', // zoom target container height in pixel or in percent 
           'easing' : 'smartZoomEasing', // jquery easing function used when the browser doesn't support css transitions
           'maxScale' : 5, // the max scale that will be applied on the zoom target
           'dblClickMaxScale' : 1.8, // the max scale that will be applied on the zoom target on double click 5段階ズーム
           'mouseEnabled' : true, // enable plugin mouse interaction 
           'scrollEnabled' : true, // enable plugin mouse wheel behviour
           'dblClickEnabled' : true, // enable plugin mouse doubleClick behviour
           'mouseMoveEnabled' : true, // enable plugin target drag behviour
           'moveCursorEnabled' : true, // show moveCursor for drag
           'touchEnabled' : true, // enable plugin touch interaction 
           'dblTapEnabled' : true, // enable plugin double tap behaviour 
           'pinchEnabled' : true, // enable zoom when user pinch on target
           'touchMoveEnabled' : true, // enable target move via touch
           'containerBackground' : '#00bfff', // zoom target container background color (if containerClass is not set) 背景色
           'containerClass' : ''// class to apply to zoom target container if you whant to change background or borders (don't change size or position via css)
          } 
   );  

  // クリック 画像を移動（パン）制御
  $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler); 
  // クリック 拡大と縮小（ズーム）制御
  $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler); 

  // 拡大と縮小(zooming)ボタン制御 → クイックデモ参照
  function zoomButtonClickHandler(e){ 
    var scaleToAdd = 0.8;
    if(e.target.id == 'zoomOutButton')
      scaleToAdd = -scaleToAdd;
    $('#imageFullScreen').smartZoom('zoom', scaleToAdd);
  }
  // 画像を移動（panning）ボタン制御 → クイックデモ参照
  function moveButtonClickHandler(e){  
    var pixelsToMoveOnX = 0;
    var pixelsToMoveOnY = 0;
    switch(e.target.id){
      case "leftPositionMap":
        pixelsToMoveOnX = 50;
        break;
      case "rightPositionMap":
        pixelsToMoveOnX = -50;
        break;
      case "topPositionMap":
        pixelsToMoveOnY = 50;
        break;
      case "bottomPositionMap":
        pixelsToMoveOnY = -50;	
        break;
    }
    $('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
  }
});

４これまでのまとめ

これまでのまとめとして、機能別に３つのサンプルHTMLをつぎのとおり作成しました。
サンプルの使用原本画像の大きさは、960x720pxです。

サンプル１HTML
サンプル２HTML
サンプル３HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル１ Zoom and pan 基本機能＋起動オプション省略</title>

</head>
<body>
<h1 style="text-align:center">サンプル１ Zoom and pan 基本機能＋起動オプション省略</h1>
<div id="imgContainer">
  <img id="imageFullScreen" src="./img/cherry-blossom-1260641_960_720.jpg" width="800"/>
</div>

<!-- jQuery -->
<script type="text/javascript" src="./src/jquery-1.11.0.min.js"></script>
<!-- Zoom and pan jQuery plugin  -->
<script src="./src/e-smart-zoom-jquery.min.js"></script>

<!-- プラグイン「e-smart-zoom-jquery.js」の起動 -->
<script>
 $(document).ready(function() {
    $("#imageFullScreen").smartZoom(); // start plugin behaviour optionなし
  });
</script>
<br>
<br>
引用・参照：<a href="https://webkaru.net/jquery-plugin/pan-and-zoom/" target=~_blank">jQueryプラグイン「pan and zoom」</a>
<hr>
<center>
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOMEへ">
 </a><br>(c)urbanqee.com 2022. 6.22
</center>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル２ Zoom and pan 基本機能＋起動オプションあり</title>

</head>
<body>
<h1 style="text-align:center">サンプル２ Zoom and pan 基本機能＋起動オプションあり</h1>
<div id="imgContainer">
  <img id="imageFullScreen" src="./img/cherry-blossom-1260641_960_720.jpg" width=""/>
</div>

<!-- jQuery -->
<script type="text/javascript" src="./src/jquery-1.11.0.min.js"></script>
<!-- Zoom and pan jQuery plugin  -->
<script src="./src/e-smart-zoom-jquery.min.js"></script>

<!-- プラグイン「e-smart-zoom-jquery.js」の起動 -->
<script>
$(document).ready(function() {
  $("#imageFullScreen").smartZoom({'containerBackground':'skyblue'}); // start plugin behaviour  optionあり
  });
</script>
<br><br>
引用・参照：<a href="https://webkaru.net/jquery-plugin/pan-and-zoom/" target=~_blank">jQueryプラグイン「pan and zoom」</a>
<hr>
<center>
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOMEへ">
 </a><br>(c)urbanqee.com 2022. 6.22
</center>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル３ Zoom and pan 応用機能＋起動オプションあり</title>

<style>
.box{
  display: inline-block;
  font-size: 16px;
}

.boxContainer{
  font-size: 0;
}
</style>

</head>
<body>
<div id="imgContainer">
  <img id="imageFullScreen" src="./img/cherry-blossom-1260641_960_720.jpg" width="600"/>
</div>

<!-- jQuery -->
<script type="text/javascript" src="./src/jquery-1.11.0.min.js"></script>
<!-- Zoom and pan jQuery plugin  -->
<script src="./src/e-smart-zoom-jquery.min.js"></script>
・<b>画像制御パネル</b>
<div id="positionButtonDiv" class="boxContainer">
<div class="box" style="border:0px solid #dcdcdc;text-align: center;vertical-align: top;">
  <p><small><b>▼拡大と縮小 <br>（５段階zoom）</b></small><br><br>
    <span>
      <img id="zoomInButton" class="zoomButton" src="./img/zoomIn.png" title="zoom in" alt="zoom in" />
      <img id="zoomOutButton" class="zoomButton" src="./img/ZoomOut.png" title="zoom out" alt="zoom out" />
    </span>
<br>
  </p>
</div>
<div class="box" style="border:0px solid #dcdcdc;text-align: center;vertical-align: top;margin-left:10px">
  <p><small><b>▼画像を移動(pan）</b></small><br><br>
    <span class="positionButtonSpan">
      <map name="positionMap" class="positionMapClass">
      <area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/>
      <area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/>
      <area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/>
      <area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/>
      </map>
      <img src="./img/position.png" usemap="#positionMap" />
    </span>
  </p>
 </div>
<div  class="box" >
<h1 style="text-align:center">サンプル３ Zoom and pan 応用機能＋起動オプションあり</h1>
</div>
</div>

<!-- プラグイン「e-smart-zoom-jquery.js」の起動 -->
<script>
$(document).ready(function() {
 // プラグイン起動、全起動オプション
 $("#imageFullScreen").smartZoom(
        options = {'top' : '0', // zoom target container top position in pixel
           'left' : '0', // zoom target container left position in pixel
           'width' : '100%', // zoom target container width in pixel or in percent
           'height' : '100%', // zoom target container height in pixel or in percent 
           'easing' : 'smartZoomEasing', // jquery easing function used when the browser doesn't support css transitions
           'maxScale' : 5, // the max scale that will be applied on the zoom target
           'dblClickMaxScale' : 1.8, // the max scale that will be applied on the zoom target on double click 5段階ズーム
           'mouseEnabled' : true, // enable plugin mouse interaction 
           'scrollEnabled' : true, // enable plugin mouse wheel behviour
           'dblClickEnabled' : true, // enable plugin mouse doubleClick behviour
           'mouseMoveEnabled' : true, // enable plugin target drag behviour
           'moveCursorEnabled' : true, // show moveCursor for drag
           'touchEnabled' : true, // enable plugin touch interaction 
           'dblTapEnabled' : true, // enable plugin double tap behaviour 
           'pinchEnabled' : true, // enable zoom when user pinch on target
           'touchMoveEnabled' : true, // enable target move via touch
           'containerBackground' : '#00bfff', // zoom target container background color (if containerClass is not set) 背景色
           'containerClass' : ''// class to apply to zoom target container if you whant to change background or borders (don't change size or position via css)
          } 
   );  
  // クリック 画像を移動（パン）制御
  $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler); 
  // クリック 拡大と縮小（ズーム）制御
  $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler); 
  // 拡大と縮小(zooming)ボタン制御 → クイックデモ参照
  function zoomButtonClickHandler(e){ 
    var scaleToAdd = 0.8;
    if(e.target.id == 'zoomOutButton')
      scaleToAdd = -scaleToAdd;
    $('#imageFullScreen').smartZoom('zoom', scaleToAdd);
  }
  // 画像を移動（panning）ボタン制御 → クイックデモ参照
  function moveButtonClickHandler(e){  
    var pixelsToMoveOnX = 0;
    var pixelsToMoveOnY = 0;
    switch(e.target.id){
      case "leftPositionMap":
        pixelsToMoveOnX = 50;
        break;
      case "rightPositionMap":
        pixelsToMoveOnX = -50;
        break;
      case "topPositionMap":
        pixelsToMoveOnY = 50;
        break;
      case "bottomPositionMap":
        pixelsToMoveOnY = -50;	
        break;
    }
    $('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
  }
});

</script>
<br><br>
引用・参照：<a href="https://webkaru.net/jquery-plugin/pan-and-zoom/" target=~_blank">jQueryプラグイン「pan and zoom」</a>
<hr>
<center>
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOMEへ">
 </a><br>(c)urbanqee.com 2022. 6.22
</center>

</body>
</html>

はじめての 画像 Zoom and pan jQuery プラグイン 入門

１ インストール

２ 表示画像HTML

３ jQuery プラグイン「e-smart-zoom-jquery.js」の起動

４ これまでのまとめ

はじめての画像 Zoom and pan jQuery プラグイン入門

１インストール

２表示画像HTML

４これまでのまとめ