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

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

［zoom.js］：実装サンプルはコチラ

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

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

導入手順

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

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

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

ここで入手したファイルのうち、使うのは［zoom.js］と［zoom.css］の２つ。

その他に［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」以上にする必要があります。

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

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