画像をクリックすると、スムーズな動きで拡大表示され、ウィンドウをスクロールすると再び気持ちのイイ動きで縮小される、ライトボックス風のjQueryプラグインを紹介します。

[zoom.js]と名付けられたこのjQueryプラグインですが、シンプルでいて非常に完成度が高いためか、最近かなりの注目を集めているようです。
まずは以下のURLより、実装したサンプルをご覧ください。

[zoom.js]:実装サンプルはコチラ

クリック操作で拡大。
またスクロールさせる以外に、もう一度画像をクリックするかESCキーでも縮小させることができます。

この手の画像操作系のライブラリは動作が重く、なかなか導入に踏み切れないケースが多々ありますが、この[zoom.js]は非常に軽快に動作するので好感度MAXです。

導入手順

さて。この[zoom.js]を実際に設置してみましょう。

まずは公式サイトよりメインのデータファイル一式をダウンロードしてきます。

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

ここで入手したファイルのうち、使うのは[zoom.js]と[zoom.css]の2つ。

その他に[jQuery.js]と[transition.js]も必要になってきます。
こちらは以下のサイトからダウンロードしてきてください。

ここで使う「transition.js」は、もともとはCSSフレームワークの[Bootstrap]で利用されているものです。
アニメーションのエフェクトを司るJavaScriptで、比較的汎用性が高いので[zoom.js]でも利用してしまおう、というコンセプトなのでしょうね。

入手してきたこれらのファイルをHTMLの任意の箇所で読み込みます。

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

これで準備は完了。
最後に[zoom.js]を起動させるために、画像を表示するimgタグにカスタムデータ属性を指定する必要があります。
この値は data-action="zoom" と記述します。

<img src="sample.png" data-action="zoom">

以上。簡単に設定できますね。


実装サンプルのページでも書きましたが、スマートフォンなど、ウィンドウの横幅が狭く、画像の横幅が100%で表示されている場合は[zoom.js]は機能しません。
これはエラーではなく仕様になります。

仮に画像の横幅が「420px」の場合、ウィンドウの横幅を「420px」以上にする必要があります。

一番の魅力はサラっと軽快に動作する操作感。
この動き、気持ちイイと思いませんか?

モーダルウィンドウを実装したいとき。このプラグインを候補に入れてみてはいかがでしょうか。