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

画像をクリックしてモーダルで大きい画像が表示される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の記載のドキュメントをご覧ください。

参考

francoischalifour/medium-zoom | Github