Zoomify

JavaScript

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

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

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

デモ

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

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

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

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

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

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

Zoomify

関連記事

  1. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

  2. jquery countDownTimer
  3. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

  4. Sidr

    JavaScript

    横からサイドメニューが現れるjQueryプラグイン「Sidr」

    面白いjQueryプラグインがあったのでメモがてらご紹介します。Sid…

  5. SVG 3D Tag Cloud jQuery Plugin
  6. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP