画像をクリックしてモーダルで大きい画像が表示されるLightbox系のライブラリは山ほどあるのですが、Mediumみたいに表示されている画像がそのまま拡大されるライブラリはあまりなく、探してみたところZoomingとMedium Zoomというライブラリが見つかりました。
Githubのスター数がより多いMedium Zoomを当ブログに導入したので使い方をご紹介します。
サンプル
下の画像をクリックで拡大します。

インストール
script
タグでライブラリの読み込み。
使い方
使い方は簡単でmediumZoom
関数の第一引数に適用したい画像セレクターを指定し、第二引数にオブジェクトでオプションを指定します。
以下は当ブログの例です。
mediumZoom(document.querySelectorAll('.wp-block-image > img'), {
margin: 24,
background: '#292d3d',
scrollOffset: 0,
});
セレクター
セレクターはCSS selector、HTMLElement、NodeList、Arrayの4つの方法で指定することが可能です。
// CSS selector
mediumZoom('[data-zoomable]')
// HTMLElement
mediumZoom(document.querySelector('#cover'))
// NodeList
mediumZoom(document.querySelectorAll('[data-zoomable]'))
// Array
const images = [
document.querySelector('#cover'),
...document.querySelectorAll('[data-zoomable]'),
]
mediumZoom(images)
オプション
Property | Type | Default | Description |
---|---|---|---|
margin |
number |
0 |
ズーム時の余白 |
background |
string |
"#fff" |
背景色 |
scrollOffset |
number |
40 |
何pxスクロールすると閉じるか |
container |
string | HTMLElement | object |
null |
レンダリングするビューポート |
template |
string | HTMLTemplateElement |
null |
ズームした時に表示するテンプレート |
その他イベントやdata-zoom-src
属性を利用してズーム時に高画質な画像を読み込むことも可能です。
詳しくはGithubの記載のドキュメントをご覧ください。