Single/Multiple Image Selector In jQuery - Media Selector

Media Selector is a tiny jQuery script that enables you to select single or multiple images (or any other elements) from a gallery. User can select multiple file by Shift+Ctrl key.

How to use it:

1. Insert images together with check icons (use Font Awesome in this example) into labels with the CSS class of 'image-checkbox'. Don't forget to assign a unique ID to each image using the 'su-media-id' attribute.

<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 normal checkbox to toggle between Single Select and Multiple Select.

<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 displays a JSON string containing image IDs you select.

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

4. The necessary CSS to style 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 necessary jQuery library at the end of the document.

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

6. The main JavaScript (jQuery script) to activate 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();
  });
});

Changelog:

• 2022-03-23
• New feature added. Now user can select multiple file by Shift+Ctrl key

---

This awesome jQuery plugin is developed by devsharif. For more Advanced Usages, please check the demo page or visit the official website.