Zoomifyは、画像のズーム効果を備えたシンプルなライトボックスのためのjQueryプラグインです。完成するページはとにかくシンプルです。整列された画像をクリックすれば、ページの移行を行うことなく、その場で画像が拡大されます。こちらのプラグインはレシポンシブ対応です。デモページでは風景画像が主に使用されていますが、拡大機能を活用し細部を写した画像に対しても効果的です。
優れたユーザビリティと機能性
以下、Zoomifyのデモになります。
Zoomifyの良さは2つあります。1つめは、「ユーザビリティに優れている」ことです。画像の上にマウスオンするとカーソルが「虫眼鏡」に変化します。虫眼鏡のレンズ部分には「+」が表示されます。画像が拡大表示されることを、サイト訪問者に一目で認識してもらえることを期待できますね。
クリックし拡大された画像上では、「-」に変化します。縮小(元に戻る)することを意味します。また、この機能はカーソルが表示されるパソコン等に適用されます。
2つめは、「機能性が高い」ことです。拡大された画像は常に画面の中央に表示されます。拡大した状態でサイト内をスクロールしても、一緒に画像がついてきて中央に表示され続けます。
この他にオプション機能として、画像が拡大される時間をミリ秒単位で指定できます。デフォルトは「200」です。
さらに、画像が画面サイズより大きい場合には、最大のズーム倍率で拡大され、画面から画像がはみ出すことがない設計がされています。
レシポンシブ対応ですが、ひとつ欠点があるようです。通常画面でのズームインには対応していますが、拡大画像をさらにズームインすると、画像が画面上から消失してしまいます。おそらく中央表示させようとする機能によるものかと思われます。
ギャラリーサイトはもちろん、個人の趣味を披露する場でも活用できるプラグインですね。Zoomifyのダウンロードや詳しい使い方は以下からどうぞ。