画像の拡大・縮小と移動（パン）「pan and zoom 」
当ページのリンクには広告が含まれています。
スポンサーリンク
画像の拡大・縮小と移動（パン）を実装するプラグイン「pan and zoom」を紹介します。
jQueryプラグイン「pan and zoom」
このプラグインを使えば、指定した画像の拡大や縮小を行うことができます。
また拡大した画像を移動するカメラのような操作「パン」も行うことができます。
画像メインのサイトにおもしろい効果を付加することができますね。
スポンサーリンク
それではデモページで画像の拡大・縮小と移動を行ってみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="pan and zoom のデモでーす。">
<title>pan and zoom - imageCloud</title>
</head>
<body>
<h1>pan and zoom のデモ。</h1>
<div id="positionButtonDiv">
<p>拡大と縮小 →
<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>
</p>
<p>画像を移動（パン）
<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 id="imgContainer">
<img id="imageFullScreen" src="img/sakura.png"/>
</div>
<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/imagecloud/">「jQueryプラグインまとめ」に戻る</a>
</footer>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/e-smart-zoom-jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
$('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);
$('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);
function zoomButtonClickHandler(e){
var scaleToAdd = 0.8;
if(e.target.id == 'zoomOutButton')
scaleToAdd = -scaleToAdd;
$('#imageFullScreen').smartZoom('zoom', scaleToAdd);
}
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>
</body>
</html>
スポンサーリンク