Single and Multiple Media/Image Selector From Gallery with Javascript/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.


  • 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 class="image-checkbox">
  <img su-media-id="script" src="2.jpg" />
  <i class="fa fa-check"></i>
<label class="image-checkbox">
  <img su-media-id="net" src="3.jpg" />
  <i class="fa fa-check"></i>

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

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 () {
      mediaArray = [];
  $(".image-checkbox").on("click", function (e) {
      var selected = $(this).find('img').attr('su-media-id');
      if ($(this).hasClass('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 () {
              mediaArray = [];
          } else {
              if (mediaArray.indexOf(selected) === -1) {
      selectedMediasId = mediaArray.join(",");
      $('#selectedmediapreview').html('<div class="alert alert-success"><pre lang="js">' + JSON.stringify(mediaArray.join(", "), null, 4) + '</pre></div>');

See Demo And Download


Official Website(devsharif): Click Here

This superior jQuery/javascript plugin is developed by devsharif. For extra Advanced Usage, please go to the official website.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Leave a Reply

Your email address will not be published. Required fields are marked *