たった1行！medium-zoomで画像の拡大プレビューを導入しよう！既存コードの変更必要なし！

medium-zoomというライブラリを使って、たった1行のコードで画像ポップアップ（画像の拡大プレビュー）を実装する方法を紹介します。

動作イメージ。mediumZoomを適応しておいた画像をクリックすると、拡大される。

今回実装するのは、画像をクリックすると拡大してくれる機能です。lightboxと呼ばれることもあります。

medium-zoomの最大の特長は「imgタグの変更が必要ない」という点です。JSやCSSセレクタでポップアップを適用する画像を指定すると、HTMLの変更なしでポップアップ機能を追加できるところにあります。

はじめにサンプルをご覧あれ！

最初にサンプルをご覧いただきましょう。

medium-zoomを読み込み、たった1行のコードを実行するだけで、画像の拡大プレビューが実装できました。めっちゃラクでしょ！

しかも、imgタグに特別な属性を追加したりする必要もありません。

拡大プレビューのためにHTMLをいじる必要がないため、すぐに導入できちゃいます。

まずはmedium-zoomをインストールしましょう。CDNで読み込むか、npmでインストールしましょう。

CDNならこちら↓

<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.6/dist/medium-zoom.min.js"></script>

npmでインストールする場合は以下のコマンドを実行し、

npm install medium-zoom

インストールしたmedium-zoomをインポートします。

import mediumZoom from 'medium-zoom';

次にmedium-zoomを初期化します。

scriptタグ内で、mediumZoomを呼び出します。第1引数に拡大できるようにしたい画像のセレクタを指定します。

冒頭で紹介したサンプルではimageクラスが付与されている画像を対象にしました。

mediumZoom(document.querySelectorAll('.image'));

ここではjsセレクタで要素を指定しましたが、CSSセレクタでもOK。CSSセレクタで指定したいときは、文字列で指定します。

mediumZoom('.image');

配列で指定することもできるようですが、当方の環境ではなぜか動作せず。

以上で実装完了です！とってもかんたん！

全体のコードはこんな感じ。たったこれだけのコードで、画像の拡大機能を追加することができます。

<script>
import mediumZoom from 'medium-zoom';
mediumZoom(document.querySelectorAll('.image'));
</script>

CSSの読み込みも自動でやってくれます。手動でCSSファイルを読み込む手間もありません。

既存のページに画像の拡大プレビューを追加したいときに活用してみてください！