軽快に画像をズームできる「zoom.js」

zoom.jsとは

クリックで画像をズームしてくれるjQueryプラグインです。
動きも軽快で良いです。
ズーム後に「esc」キーを押すとズーム解除、またスクロールしてもズームが解除されます。
また、クリック時にMacであれば、「command」キー、Windowsであれば「ctrl」キーを同時におすと、新規タブで画像を開くことができます。

使ってみる

まずダウンロード

こちらから

設置する

「zoom.js」はBootstrapの中の「transition.js」に依存したプラグインとなっているので、こちらも読み込むようにしましょう。

読み込むファイルは下記です。（jQueryも忘れずに）

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

ソース

使いたい要素に「data-action=”zoom”」を付与してあげるだけで使えます。

<img src="画像" data-action="zoom">

デモ

どうでもいいですが写真は鳥取砂丘に行ったときに撮った夕日です。太陽が近かったです。

DEMO

さいごに

対応はIE9以上と書いてありますので、使えるところも多いのではないでしょうか。
画像中心のサイトに向いているかと。
どうせ使うならサイト全体もBootstrapで実装したいところですね。