Fancybox v4 の機能の一つの
Panzoomは、
任意のHTMLコンテンツに使いやすい、固定の位置で、画像の移動（panning）および 画像の縮小/拡大(zooming)を実現します。
fancyBoxは、GPLv3ライセンスの基でライセンスされています。
Fancyboxのライセンスの詳細規定は、14th May 2021 - License Agreement（英語） にあります。
<!-- Fancyapps-fancybox4 JS jsdelivr.net -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/fancybox.umd.js"></script>
<!-- Fancyapps-fancybox4 CSS jsdelivr.net -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/fancybox.css"/>
<!-- Panzoom controle js -->
<script src=" https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/panzoom.controls.umd.js"></script>
<!-- Panzoom CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/panzoom.css"/>
<!-- Panzoom controle CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/panzoom.controls.css"/> Panzoom（パンズーム）の書き方について以下に説明します。
javasccriptconst myPanzoom = new Panzoom(document.querySelector("#myPanzoom"), {
// Your options go here
});#myPanzoom {
width: 600px;
height: 400px;
background-color: #eee;
text-align:center;
}<div id="myPanzoom" class="panzoom">
<div class="panzoom__viewport">
<img class="panzoom__content"
src="http://urbanqee.com/webutil/photo/fancybox4/panzoom/shinjuku-3672072_960_720.jpg"
title="パンディング、ズーミング" />
</div>
</div>これまでのPanzoom（パンズーム）についてHTMLをまとめました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="pan and zoom のデモでーす。">
<title>Panzoom パンニング、ズーミング デモ</title>
<!-- Fancyapps-fancybox4 JS jsdelivr.net -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/fancybox.umd.js"></script>
<!-- Fancyapps-fancybox4 CSS jsdelivr.net -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/fancybox.css"/>
<!-- Panzoom controle js -->
<script src=" https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/panzoom.controls.umd.js"></script>
<!-- Panzoom CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/panzoom.css"/>
<!-- Panzoom controle CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/panzoom.controls.css"/>
<style>
body {
max-width: 800px;
width:800px;
margin: 0 auto;
padding: 0px;
text-align:center;
}
#myPanzoom {
width: 800px;
height: 500px;
background-color: #eee;
text-align:center;
}
.panzoom__content{
width: 400px;
}
</style>
</head>
<body>
<h1 style="text-align:center;padding-top:10px">Panzoom パンニング、ズーミング<br> デモ</h1>
<div id="myPanzoom" class="panzoom">
<div class="panzoom__viewport">
<img class="panzoom__content"
src="http://urbanqee.com/album/pipipiga/img/09-04%20sagamihara%20park/P4280346.jpg"
title="パンディング、ズーミング" />
</div>
<!-- <p>Simple caption</p>-->
</div>
<footer style="margin-top:20px">
引用：<a href="https://fancyapps.com/docs/ui/panzoom" target="_blank">Panzoom Overview</a>
<hr>
</footer>
<script>
const myPanzoom = new Panzoom(document.querySelector("#myPanzoom"), {
// Your options go here
});
</script>
</body>
</html>引用・参照：Fancyapps ui panzoom
fancybox関連リンク
Lightbox系メディアビューア（まとめ サイト内リンク）
| No | ビューアー | JSフレームワーク | モーダル window*2 | 画像 | 動画*1 | 動画共有サイト 動画 | Webページ | スライドシュー | 備考 |
| 1 | Lightbox | PrototypeからjQueryに変更（v2.51) | モーダル | ● | ● | 人気 | |||
| 2 | Pirobox | jQuery | モーダル | ● | ● | 推奨 | |||
| 3 | Videobox | mootools | モーダル | ● | |||||
| 4 | Mediabox | mootools | モーダル | ● | ● | ● | |||
| 5 | Shadowbox | Prototype、
MooTools (requires 1.2 Core)、
Dojo Toolkit、 Yahoo! User Interface Library、 Ext (requires ext-core.js)、 非JSフレームを選択可 | モーダル | ● | ● | ● | ● | ● | 推奨 |
| 6 | Colorbox | jQuery | モーダル | ● | ● | ● | ● | ● | |
| 7 | Fotorama | jQuery | 非モーダル | ● | ● | ● | ● | ● | スライダー |
| 8 | Fancybox | jQuery | モーダル | ● | ● | ● | ● | ● | 人気 |
| ※動画とは、SWF、FLV、MOV、WMV（*1) ※モーダルwindow：画像などメディアの表示は新しい別ウインドー（*2） | |||||||||