Image Picker - 画像を選択する入力コンポーネント // MOONGIFT Archived

画像が並んでいて、そこから選ぶようなインタフェースを作る場合、どういうものを想像するでしょうか。画像の下にチェックボックスを配置するのが簡単そうですが、直感的とは言いがたいUIです。そこで使ってみたいのがImage Pickerです。画像をそのまま選択できるコンポーネントになっています。

Image Pickerの使い方

一例です。画像を選択すると枠が青くなります。

複数選択もできます。選択上限を設けることもできます。

ドロップダウンと連動させることもできます。

レイアウトは自由に変更できます。

Image Pickerは画像を選択肢として使うコンポーネントです。使い勝手としてはselectタグの選択肢やラジオボタン、チェックボックスと変わりません。しかしテキストよりも文字列の方が使いやすいケースもあるでしょう。

Image PickerはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。