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

baffle.jsDOM要素内のテキストを難読化させて読めるようにする「baffle.js」前のページ

GIFアニメーションによるツールチップを実装できる「Toolgif」次のページToolgif

関連記事

  1. jquery-bubble-text

    JavaScript

    テキストがアニメーションで切り替わっていく「jquery-bubble-text」

    jquery-bubble-textは、テキストが次々に切り替わってい…

  2. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  3. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  4. jquery-time-slider

    JavaScript

    時間と日付を選択できる「jquery-time-slider」

    jquery-time-sliderは時間と日付を選択できるjQuer…

  5. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP