Single/multiple Select Images Just Like Using Checkboxes – ImgCheckBox.js

Preview:

Description:

ImgCheckBox.js is a JavaScript library that turns your static images into interactive checkboxes for a better image selection experience.

It can be useful in online surveys, product selections, or any application where visual choices enhance the user experience.

How to use it:

1. Download and insert the imgCheckBox.min.js script into your document.

<script src="dist/imgCheckBox.min.js"></script>

2. Initialize the ImgCheckBox on your images as follows:

<div class="image">
  <img name="images[]" data-id="1" src="1.jpg" alt="image" />
</div>
<div class="image">
  <img name="images[]" data-id="2" src="2.jpg" alt="image" />
</div>
<div class="image">
  <img name="images[]" data-id="3" src="3.jpg" alt="image" />
</div>
... more image here

const imgCheckBox = new ImgCheckBox('img', {
  // options here
});

3. All possible options to customize the image checkbox.

const imgCheckBox = new ImgCheckBox('img', {
  checkMarkImage: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMzQ2LjM4NCkiPjxwYXRoIGZpbGw9IiMxZWM4MWUiIGZpbGwtb3BhY2l0eT0iLjgiIGQ9Ik0zMiAzNDYuNGEzMiAzMiAwIDAgMC0zMiAzMiAzMiAzMiAwIDAgMCAzMiAzMiAzMiAzMiAwIDAgMCAzMi0zMiAzMiAzMiAwIDAgMC0zMi0zMnptMjEuMyAxMC4zbC0yNC41IDQxTDkuNSAzNzVsMTcuNyA5LjYgMjYtMjh6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkuNSAzNzUuMmwxOS4zIDIyLjQgMjQuNS00MS0yNiAyOC4yeiIvPjwvZz48L3N2Zz4=',
  enableShiftClick: true,
  graySelected: true,
  scaleSelected: true,
  fixedImageSize: false,
  checkMark: 'imgChked',
  checkMarkSize: '30px',
  checkMarkPosition: 'top-left',
  scaleCheckMark: true,
  fadeCheckMark: false,
  addToForm: false,
  inputValueAttribute: null,
  preselect: [],
  radio: false,
  canDeselect: false,
  styles: {},
  debugMessages: false,
});

4. Callback functions.

const imgCheckBox = new ImgCheckBox('img', {
  onClickCallback: (el, isSelected) => {
    // ...
  },
  onChange: (el, isSelected) => {
    // ...
  },
  onSelectCallback: (el) => {
    // ...
  },
  onDeselectCallback: (el) => {
    // ...
  },
});

Changelog:

10/20/2024

• Update package

05/28/2024

• Fix default options

03/07/2024

• Add interface export