クリック時に画像を拡大するJSライブラリ「zooming」

Webページで画像のクリック時にズームさせるJavascriptライブラリ「zooming」の紹介です。

ポートフォリオや販促系のWebサイトでは、画像そのものがメインコンテンツと同じぐらい重要になってきますが、そう言ったサービスでは高解像度の画像を載せたい時もあります。

そんな時に便利に使えそうなJavascriptライブラリが「zooming」です。

* zoomingを実際に使ったGIF ( bootstrapと組み合わせて使っています )

zoomingは画像をクリックした際に拡大表示させるシンプルなライブラリで、拡大だけではなくクリック時に画像を切替えることも可能。

また、普通に使う分にはjavascriptの処理を書く必要なく簡単に導入が出来ます。
( * 画像は自動的に解像度によってリサイズされます )

zoomingのインストール

zoomingの導入はこちら(githubのレポジトリ)からライブラリ本体を直接ダウンロードするほか、パッケージマネージャーからの導入にも対応しています。

# yarn
yarn add zooming
# npm
npm install zooming --save
# bower
bower install zooming --save

Zoomingの使い方

zoomingの使い方は簡単で、ライブラリを読み込んだ後 imgタグにdata-action属性を与えるだけで使えます。

<!-- ライブラリの読み込み -->
<script src="zooming/build/zooming.min.js"></script>

<!-- data-actionを追加 -->
<img src="yourImage.jpg" data-action="zoom" >

上記のようにするとクリックした時に画像が拡大表示されます。

* 左がクリック前、右がクリック時にzoomingで拡大された画像

クリック時に画像を切替えることも可能で、その場合は'data-original'を使います。
クリック時に高解像度の画像を表示させたい時などに使うと便利そうです。

* data-original属性

<!-- ライブラリの読み込み -->
<script src="zooming/build/zooming.min.js"></script>

<!-- 拡大時にdata-original内の画像がロードされます -->
<img src="low-resolution.jpg" 
     data-action="zoom" 
     data-original="hi-resolultion.jpg"
>

また、config関数を使うとzoomingの各種設定が行えます。
( * バックグラウンドカラーの設定やクリック時のコールバックなど )

Zooming.config({
  defaultZoomable: 'img[data-action="zoom"]', // zoom時のクラスの設定
  enableGrab: true, // ズーム時の画像移動の許可
  preloadImage: true, // 画像切り替えの許可
  bgColor: "rgb(0, 0, 0)", // バックグラウンドカラー
  bgOpacity: 1,
  scaleBase: 0.8, // 倍率
  scaleExtra: 2, // 拡大時、画像を動かした時の拡大サイズ
  onOpen: function () {
        /**
         * 各種コールバックも用意されています
         * onBeforeOpen // 画像を開く前
         * onBeforeClose // 拡大画像を閉じた時のアクション
         * onBeforeGrab // 画像をクリック(掴む)移動させる前
         * onBeforeMove　// 掴んだ画像を動かす前
         */
        console.log("クリックされて画像が開かれた時のコールバック");
      }
});

Summary

以上がzoomingの紹介でした、ポートフォリオ、販促サイト、画像サイズを掲載用 ⇔ 詳細用にわけたい時に導入すると便利そうです。

jQueryなどの外部ライブラリにも依存していないので、既存のサイトにも簡単に導入できそうです。