Zoomify

JavaScript

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

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

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

デモ

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

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

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

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

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

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

Zoomify

Add To Cart Interactionアイテムを追加するとカートがスライド表示される「Add To Cart Interaction」前のページ

CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」次のページjcSlider

関連記事

  1. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  2. Warp drive jQuery plugin
  3. no-image

    JavaScript

    マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

    MDTimePickerはマテリアルデザインをコンセプトにしたタイムピ…

  4. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  5. jQuery Notebook
  6. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP