Single and Multiple Media/Image Selector From Gallery with JS/Jquery

JS Media Selector is a single and multiple media/image selector from a gallery using Javascript/Jquery.

Note: The user can use this file as long as for Personal or Educational purposes.

Features

Select single/multiple photos
Get the image ID specified by a comma-separated array and pass it to the server
Single/Multiple selection quick toggle
Get the delimited element as an array/comma-separated string
Server-side data can be sent easily

Must Read: [Facebook] Easy Social Media Login Authentication Integrator In JavaScript | AuthJs

How to make use of it:

1. Insert images with verification codes into labels using the CSS class of Image Selection Box (use Font Awesome in this example).

<label class="image-checkbox">
  <img su-media-id="jquery" src="1.jpg" />
  <i class="fa fa-check"></i>
</label>
<label class="image-checkbox">
  <img su-media-id="script" src="2.jpg" />
  <i class="fa fa-check"></i>
</label>
<label class="image-checkbox">
  <img su-media-id="net" src="3.jpg" />
  <i class="fa fa-check"></i>
</label>
...

2. Create a checkbox to switch between single selection and multiple selection.

<input type="checkbox" class="custom-control-input" id="allowmultiple">
<label class="custom-control-label" for="allowmultiple" style="cursor: pointer;">
  Multiple Select
</label>

3. Create a result container in which the media selector returns a JSON string containing the image IDs.

<div id="selectedmediapreview"></div>

4. CSS to design the image checkboxes.

.image-checkbox {
  cursor: pointer;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 3px solid transparent;
  box-shadow: 0 0 4px #ccc;
  outline: 0;
  margin: 4px;
  border-radius: 12px;
}

.image-checkbox-checked {
  border-color: #2196f3;
}

img {
  border-radius: 8px;
  max-height: 160px !important;
  max-width: -webkit-fill-available;
}

.image-checkbox i {
  display: none;
  color: #2196f3;
}

.image-checkbox-checked {
  position: relative;
}

.image-checkbox-checked i {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
}

5. Load the jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

6. The javascript (jQuery script) to enable the image selector.

jQuery(function ($) {
  var mediaArray = [];
  var selectedMediasId;
  var isMultipleAllowed = false;
  $('#allowmultiple').click(function () {
      isMultipleAllowed = $('#allowmultiple').is(':checked') ? true : false;
      $('.image-checkbox-checked').each(function () {
          $(this).removeClass('image-checkbox-checked');
      });
      mediaArray = [];
      $('#selectedmediapreview').html('');
  });
  $(".image-checkbox").on("click", function (e) {
      var selected = $(this).find('img').attr('su-media-id');
      //console.log(selected);
      if ($(this).hasClass('image-checkbox-checked')) {
          $(this).removeClass('image-checkbox-checked');
          // remove deselected item from array
          mediaArray = $.grep(mediaArray, function (value) {
              return value != selected;
          });
      }
      else {
          if (isMultipleAllowed == false) {
              $('.image-checkbox-checked').each(function () {
                  $(this).removeClass('image-checkbox-checked');
              });
              mediaArray = [];
              mediaArray.push(selected);
          } else {
              if (mediaArray.indexOf(selected) === -1) {
                  mediaArray.push(selected);
              }
          }
          $(this).addClass('image-checkbox-checked');
      }
      //console.log(selected);
      console.log(mediaArray);
      selectedMediasId = mediaArray.join(",");
      console.log(selectedMediasId);
      $('#selectedmediapreview').html('<div class="alert alert-success"><pre lang="js">' + JSON.stringify(mediaArray.join(", "), null, 4) + '</pre></div>');
      //console.log(isMultipleAllowed);
      e.preventDefault();
  });
});