画像クリックで拡大できるライブラリ「Medium Zoom」

画像をクリックしてモーダルで大きい画像が表示されるLightbox系のライブラリは山ほどあるのですが、Mediumみたいに表示されている画像がそのまま拡大されるライブラリはあまりなく、探してみたところZoomingMedium Zoomというライブラリが見つかりました。

Githubのスター数がより多いMedium Zoomを当ブログに導入したので使い方をご紹介します。

サンプル

下の画像をクリックで拡大します。

Medium Zoom サンプル画像

インストール

scriptタグでライブラリの読み込み。

使い方

使い方は簡単でmediumZoom関数の第一引数に適用したい画像セレクターを指定し、第二引数にオブジェクトでオプションを指定します。

以下は当ブログの例です。


mediumZoom(document.querySelectorAll('.wp-block-image > img'), {
	margin: 24,
	background: '#292d3d',
	scrollOffset: 0,
});

セレクター

セレクターはCSS selectorHTMLElementNodeListArrayの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の記載のドキュメントをご覧ください。

参考