Product comparison

JavaScript

製品などの比較に役立つjQueryプラグイン「Product comparison」

Product comparisonは、いくつかの種類のものを比較する時に役に立つjQueryプラグインです。例えば、製品や写真などのデザイン、サービスの比較などです。また、比較の対象は、テキストではなく画像などの視覚的に行うものに向いています。なお、デモページではスマートフォンのデザインの比較が表現されています。このように、製品の比較に最も活用できるプラグインです。では、実装方法について見ていきましょう。

Product comparison

デモ

  • 1. 製品の一覧画面のマークアップ
  • 2. 選択項目のプレビューパネルの作成
  • 3. 比較結果を表示させる部分の作成(ポップアップウィンドウの作成)

1について、表示する項目の画像をそれぞれ「img」要素でマークアップします。項目名(製品名)は、テキスト入力で表示できます。(具体的なマークアップはプラグイン配布ページへ)

2のプレビューパネルは、選択した項目をプレビューさせるために作成します。プレビュー画面には最大3つの項目を同時に選択でき、表示してくれます。こちらも具体的なマークアップは、プラグイン配布サイトで丁寧に記載されています。

3について、プレビュー画面で2つ以上の項目を選択すると、「Compare」というボタンが現れます。それをクリックすると、比較結果についての詳細画面がポップアップウィンドウで表示されます。マウスオン時の効果も指定されており、デザイン性が高いポップアップになっています。

Product comparisonを使用すると、比較前は画像のみの表示ですっきりとしたページになります。製品のデザインのみが目に飛び込んでくるので、ユーザーに視覚的に呼びかけることができます。また、比較したい製品のみを任意で選択できるので、情報の整理には画期的なプラグインだと思います。

購入画面の一歩手前で、このような比較ページを設けると、ユーザーに合った製品選び、しいては購買欲の促進に役立てることができるのではないでしょうか。

Product comparison

関連記事

  1. JavaScript

    レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox…

    とても有名なプラグインですが、今まで使ってみたことがなかったので試して…

  2. nanoGALLERY
  3. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

  4. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

  5. FSVS(Full Screen Vertical Scroller)
  6. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP