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

2021.07.29

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

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

インストール

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

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

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

セレクターはCSS selector、HTMLElement、NodeList、Arrayの4つの方法で指定することが可能です。

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の記載のドキュメントをご覧ください。