jQueryで画像複数選択フォームが簡単に作れる！「image-picker」

【以下を解決します】
・手軽に画像選択の部品を作りたい
・複数選択可能な画像選択部品が欲しい

WEBサイトやシステム開発していると、画像選択をさせたい場面が出てきます。

しかも、複数選択を可能にさせたいことも出てきたり、仕様としてはプルダウンやセレクトボックスを画像で表示したいみたいな仕様ですね。

そういう時に使えるjQueryのライブラリが「image-picker」です！セレクトボックスを作るだけで、各セレクトボックスに設定した画像が一覧表示されるので、便利で簡単です！

サンプルとサンプルソース

サンプル

「写真をクリック」か 「マルチセレクトボックスをクリック」してください。※写真選択状態とマルチセレクトボックスは連動してます。

デモ

空のhtmlファイル（demo.html等）を作成し、当ページのサンプルソースを貼り付けて、ブラウザで実行すると、すぐに動作確認できます！

サンプルソース

ライブラリは自分でダウンロードして読み込ませてください。（「公式からダウンロードしてね」の部分です）

HTML / JavaScript / css 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>

  <!--   jQuery・bootstrapライブラリ読み込み -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!--  /jQuery・bootstrapライブラリ読み込み -->

  <!--  公式からダウンロードしてね -->
  <link rel="stylesheet" href="https://appsol-one.com/custom/918-image-picker/image-picker.css">
  <script src="https://appsol-one.com/custom/918-image-picker/image-picker.js"></script>
  <!--  /公式からダウンロードしてね -->

</head>
<body>


<div class="p-4">
<select multiple="multiple" class="demo">
  <optgroup label="猫">
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/1.jpg" value="1">かわいい猫です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/2.jpg" value="2">凛々しい猫です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/3.jpg" value="3">のんびりした猫です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/4.jpg" value="4">ずっと寝てる猫です</option>
  </optgroup>
  <optgroup label="犬">
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/5.jpg" value="5">犬二匹です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/6.jpg" value="6">寂し気な犬です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/7.jpg" value="7">満面の笑みです</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/8.jpg" value="8">そわそわしてる犬です</option>
  </optgroup>
</select>
</div>
<!-- ############ javascript  ############ -->
<script type="text/javascript">
(window.onload = function() {
  $(".demo").imagepicker({
    hide_select : false,
    show_label  : true
  })


})();
</script>
<!-- ############ /javascript  ############ -->


<!-- ############  style  ############ -->
<style>
optgroup{    background: #99cbff;}
option{background: white;}
li.group ul li.group_title{
  padding: 10px;
  margin-top: 20px;
  text-align: center;
  background: #006bda;
  color: white;
}
ul.thumbnails.image_picker_selector li .thumbnail.selected {
    background: #38adff;
    color: white;
}
ul.thumbnails.image_picker_selector li .thumbnail {
    text-align: center;
}

</style>
<!-- ############  /style  ############ -->


</body>
</html>

公式サイト

公式サイトはこちらになります。
http://rvera.github.io/image-picker/

導入方法

以下からライブラリをダウンロードしてください。
https://github.com/rvera/image-picker/archive/master.zip

ダウンロードしたファイルを解凍し、解凍したフォルダから以下のライブラリを取得し、ソースに読み込ませてください

image-picker-master\image-picker\image-picker.css
image-picker-master\image-picker\image-picker.min.js

jQueryも必要なので、CDNでの読み込みであれば、以下を記述すれば、問題ないです！

HTML 
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

あとはサンプルソースのbody部分を貼り付けたら、完了となります。

使い方、解説

HTMLを作成

HTML 
<select multiple="multiple" class="demo">
  <optgroup label="猫">
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/1.jpg" value="1">かわいい猫です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/2.jpg" value="2">凛々しい猫です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/3.jpg" value="3">のんびりした猫です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/4.jpg" value="4">ずっと寝てる猫です</option>
  </optgroup>
  <optgroup label="犬">
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/5.jpg" value="5">犬二匹です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/6.jpg" value="6">寂し気な犬です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/7.jpg" value="7">満面の笑みです</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/8.jpg" value="8">そわそわしてる犬です</option>
  </optgroup>
</select>

一見すると、普通のselectタグです。ただ、optionタグに「data-img-src」という属性を追加し、そこに画像のパスを設定してください。optgroupタグをいれると、グルーピングされた状態になります。

JavaScriptを作成

JavaScript 
  $(".demo").imagepicker({
    hide_select : false,  // セレクトボックスを表示するかどうか
    show_label  : true    // optionタグのテキスト要素を画像の下に表示するか
  })

これだけです！selectタグを指定して、上記のようにライブラリを実行するだけです。
オプションも色々ありますので、いろんなパターンを実行できます！

CSSを作成（独自設定）

css 
optgroup{    background: #99cbff;}
option{background: white;}
li.group ul li.group_title{
  padding: 10px;
  margin-top: 20px;
  text-align: center;
  background: #006bda;
  color: white;
}

ul.thumbnails.image_picker_selector li .thumbnail.selected {
    background: #38adff;
    color: white;
}
ul.thumbnails.image_picker_selector li .thumbnail {
    text-align: center;
}

上記のソースは入れなくても動作しますが、今回、ライブラリのデザインだけでは少し簡素だったので、少し手を加えてみました。（このCSSを追加するとサンプルのデザインになります。）

サンプル２とサンプルソース２

色々なオプションの例として、セレクトボックスを非表示にしたり、選択上限（2個）を設定したり、説明文をなくしたりしてみました！

サンプル２

デモ

空のhtmlファイル（demo.html等）を作成し、当ページのサンプルソースを貼り付けて、ブラウザで実行すると、すぐに動作確認できます！

サンプルソース２

ライブラリは自分でダウンロードして読み込ませてください。（「公式からダウンロードしてね」の部分です）

HTML / JavaScript / css 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>

  <!--   jQuery・bootstrapライブラリ読み込み -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!--  /jQuery・bootstrapライブラリ読み込み -->

  <!--  公式からダウンロードしてね -->
  <link rel="stylesheet" href="https://appsol-one.com/custom/918-image-picker/image-picker.css">
  <script src="https://appsol-one.com/custom/918-image-picker/image-picker.js"></script>
  <!--  /公式からダウンロードしてね -->

</head>
<body>


<div class="p-4">
<select multiple="multiple" class="demo  ">
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/6.jpg" value="6">寂し気な犬です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/4.jpg" value="4">ずっと寝てる猫です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/8.jpg" value="8">そわそわしてる犬です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/2.jpg" value="2">凛々しい猫です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/7.jpg" value="7">満面の笑みです</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/1.jpg" value="1">かわいい猫です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/3.jpg" value="3">のんびりした猫です</option>
    <option data-img-src="https://appsol-one.com/custom/918-image-picker/5.jpg" value="5">犬二匹です</option>
</select>
</div>
<!-- ############ javascript  ############ -->
<script type="text/javascript">
(window.onload = function() {
  $(".demo").imagepicker({
    hide_select : true,
    show_label  : false,
    limit: 2,
    limit_reached: function(){alert('2件までです')}
  })


})();
</script>
<!-- ############ /javascript  ############ -->

<style>

ul.thumbnails.image_picker_selector li .thumbnail.selected {
    background: #38adff;
    color: white;
}
ul.thumbnails.image_picker_selector li .thumbnail {
    text-align: center;
}

</style>

</body>
</html>


よかったら、ＳＮＳでシェアして頂けると嬉しいです！
今後の励みにもなりますので、よろしくお願いします！

前の記事

jQueryで画像付きのプルダウンが作れる！「gorilla-…

次の記事

SpringBoot 1系から2系への変更【備忘録】