ミニマルなズームモーダルを実装するjQueryプラグイン「zoom.js」

今回は、画像のモーダル表示をするためのプラグイン「zoomjs」について紹介します。

デモ

このブログでも使っていますので、画像を試しに一枚貼ってみましょう。

写真はいつかに食べたコイキング焼きの写真です。

コイキング焼き

クリックorタップすることでモーダル表示になります。
スクロールすればスッと元の位置に戻ります。もう一度クリックするか、Escキーを押すことでも同様の操作が可能です。

画像が描画領域の幅いっぱいになっている場合は、モーダルが表示されません。

公式のデモサイトは以下になります。

https://fat.github.io/zoom.js/

Mediumでも使われていますので、おなじみの方もいるかもしれません。

使い方

ズームさせたいimg要素にdata-action="zoom"をつけるだけです。

<img src="..." alt="" data-action="zoom">

設定方法

GitHub

CSSとJavaScriptファイルを読み込みます。
このプラグインは以下のライブラリ・プラグインに依存しています。

  • jQuery
  • transition.js: Bootstrapに入っているプラグイン

それぞれをzoom.js本体よりも先に読み込んでください。

<head>
  <link href="css/zoom.css" rel="stylesheet">
</head>
<body>
  <script src="js/jquery.js"></script>
  <script src="js/transition.js"></script>
  <script src="js/zoom.js"></script>
</body>

適当なimg要素にdata-action="zoom"をつけてモーダルが動作すれば導入完了です。

おわりに

Mediumのモーダルのミニマルかつ最小限のモーダルUIが好きな方や、「いい感じのミニマルなモーダルプラグインがサイトにほしい!」といった方におすすめです。

  • BLOG
  • >
  • web
  • >
  • ミニマルなズームモーダルを実装するjQueryプラグイン「zoom.js」