前回は パラパラ漫画にスクロールバーを設置しました。
今回は画像に拡大や縮小と画像移動の機能を追加させました。
参考サイトは以下になります。
〇imgViewer2.jsを使って画像の拡大縮小機能を実装する【マウスホイール・拡縮ボタン】
完成コードは以下になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="C:\Users\owner\Desktop\js\jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="C:\Users\owner\Desktop\js\leaflet.css">
<script type="text/javascript" src="C:\Users\owner\Desktop\js\jquery.min.js"></script>
<script type="text/javascript" src="C:\Users\owner\Desktop\js\jquery-ui.js"></script>
<script type="text/javascript" src="C:\Users\owner\Desktop\js\leaflet-src.js"></script>
<script type="text/javascript" src="C:\Users\owner\Desktop\js\imgViewer2.js"></script>
</head>
<body>
<img id="imagePlace" src="https://lifeinfo-navi.com/wp-content/uploads/2022/02/1.png"/>
<p></p>
<script type="text/javascript">
let index = 1;
// img要素を取得する
let img = document.getElementById("imagePlace");
//拡大、縮小 画像移動
$(function() {
let img = document.getElementById("imagePlace");
$('#imagePlace').imgViewer2({
//onClick: function() {
//let img = document.getElementById("imagePlace");
//this.setZoom(2);
//this.setZoom(1);
//}
});
});
</script>
</body>
</html>「imgViewer2」を使用するとなぜかコマ送りなどの他のJavaScriptのコードが無効化されて、機能しなくなりました。
原因が解明されるまでは「imgViewer2」を使用することはありません。