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「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  2. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  3. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  4. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

  5. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

  6. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP