Google画像をクリックすると、スムーズな動きで拡大表示され、ウィンドウをスクロールすると再び気持ちのイイ動きで縮小される、ライトボックス風の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]も必要になってきます。こちらは以下のサイトからダウンロードしてきてください。jquery.jstransition.jsここで使う「transition.js」は、もともとはCSSフレームワークの[Bootstrap]で利用されているものです。アニメーションのエフェクトを司るJavaScriptで、比較的汎用性が高いので[zoom.js]でも利用してしまおう、というコンセプトなのでしょうね。入手してきたこれらのファイルをHTMLの任意の箇所で読み込みます。src="transition.js"></script>これで準備は完了。最後に[zoom.js]を起動させるために、画像を表示するimgタグにカスタムデータ属性を指定する必要があります。data-action="zoom">以上。簡単に設定できますね。実装サンプルのページでも書きましたが、スマートフォンなど、ウィンドウの横幅が狭く、画像の横幅が100%で表示されている場合は[zoom.js]は機能しません。これはエラーではなく仕様になります。仮に画像の横幅が「420px」の場合、ウィンドウの横幅を「420px」以上にする必要があります。実装サンプル配布サイト一番の魅力はサラっと軽快に動作する操作感。この動き、気持ちイイと思いませんか?モーダルウィンドウを実装したいとき。このプラグインを候補に入れてみてはいかがでしょうか。TwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】スクロール機能とナヴィゲーション機能が一体となった[ScrollMenu.js]は実用性バツグンです。各種プログラム言語でのコメントタグ(コメントアウト)表記のまとめ。