Image Picker - 画像を選択する入力コンポーネント
画像が並んでいて、そこから選ぶようなインタフェースを作る場合、どういうものを想像するでしょうか。画像の下にチェックボックスを配置するのが簡単そうですが、直感的とは言いがたいUIです。 そこで使ってみたいのがImage Pickerです。画像をそのまま選択できるコンポーネントになっています。
Image Pickerの使い方
一例です。画像を選択すると枠が青くなります。
複数選択もできます。選択上限を設けることもできます。
ドロップダウンと連動させることもできます。
レイアウトは自由に変更できます。
Image Pickerは画像を選択肢として使うコンポーネントです。使い勝手としてはselectタグの選択肢やラジオボタン、チェックボックスと変わりません。しかしテキストよりも文字列の方が使いやすいケースもあるでしょう。
Image PickerはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。
Image Picker rvera/image-picker: Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.