Zoomify

JavaScript

画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」

Zoomifyは、画像のズーム効果を備えたシンプルなライトボックスのためのjQueryプラグインです。完成するページはとにかくシンプルです。整列された画像をクリックすれば、ページの移行を行うことなく、その場で画像が拡大されます。こちらのプラグインはレシポンシブ対応です。デモページでは風景画像が主に使用されていますが、拡大機能を活用し細部を写した画像に対しても効果的です。

優れたユーザビリティと機能性

デモ

Zoomifyの良さは2つあります。1つめは、「ユーザビリティに優れている」ことです。画像の上にマウスオンするとカーソルが「虫眼鏡」に変化します。虫眼鏡のレンズ部分には「+」が表示されます。画像が拡大表示されることを、サイト訪問者に一目で認識してもらえることを期待できますね。

クリックし拡大された画像上では、「-」に変化します。縮小(元に戻る)することを意味します。また、この機能はカーソルが表示されるパソコン等に適用されます。

2つめは、「機能性が高い」ことです。拡大された画像は常に画面の中央に表示されます。拡大した状態でサイト内をスクロールしても、一緒に画像がついてきて中央に表示され続けます。

この他にオプション機能として、画像が拡大される時間をミリ秒単位で指定できます。デフォルトは「200」です。

さらに、画像が画面サイズより大きい場合には、最大のズーム倍率で拡大され、画面から画像がはみ出すことがない設計がされています。

レシポンシブ対応ですが、ひとつ欠点があるようです。通常画面でのズームインには対応していますが、拡大画像をさらにズームインすると、画像が画面上から消失してしまいます。おそらく中央表示させようとする機能によるものかと思われます。

Zoomify

関連記事

  1. Skippr

    JavaScript

    軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」

    SkipprというjQueryプラグインを使えば、軽くて速いスライドシ…

  2. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  3. Wipe Slider

    JavaScript

    背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

    Wipe Sliderは背景画像を滑らかにスライドさせることができるj…

  4. JavaScript

    jQueryで空港や駅にある掲示板のように指定した文字が切り替わっていくAirportを使ってみた

    面白いプラグインがあったので使ってみました。空港や駅にある掲示板みたい…

  5. Spring Loaders

    JavaScript

    ポリゴンによるローディングアニメーションがかっこいい「Spring Loaders」

    Spring Loadersはポリゴンでつくられたローディングアニメー…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP