Image Picker & Previewer For Bootstrap - Form Gallery

Form Gallery is a jQuery/Bootstrap plugin that allows the user to select and preview images just like a gallery. Designed to replace the native file input.

Comes with a lot of events to help developers handle add, pick, remove, click events.

Table Of Contents:

• Basic usage
• API methods
• Events

How to use it:

1. Insert the JavaScript bootstrap-form-gallery.js and Stylesheet bootstrap-form-gallery.css into the Bootstrap page.

<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">
<link href="dist/css/bootstrap-form-gallery.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="dist/js/bootstrap-form-gallery.js"></script>

2. Insert an array of preselect images into a textarea element.

<textarea id="input-images" class="formgallery-model">
  [
    "https://source.unsplash.com/Nl-SXO4FAHw/640x426",
    "https://source.unsplash.com/MUnoV4capRk/640x426",
    "https://source.unsplash.com/68csPWTnafo/640x426",
    "https://source.unsplash.com/WGGSNlYzhKM/640x426",
    "https://source.unsplash.com/UoqAR2pOxMo/640x426",
    "https://source.unsplash.com/G35D9jK1Bf0/640x426"
  ]
</textarea>

3. Build the HTML for the image picker.

<div class="formgallery" id="myPicker" data-model="#input-images">
  <div class="formgallery-list formgallery-list-three">
      <div class="formgallery-item">
          <button type="button" class="close formgallery-remove" aria-label="Close" title="Remove">
              <span aria-hidden="true">×</span>
          </button>
          <a href="#" class="formgallery-image" style="background-image: url(https://source.unsplash.com/Nl-SXO4FAHw/640x426)">
          </a>
      </div>
      <div class="formgallery-item">
          <button type="button" class="close formgallery-remove" aria-label="Close" title="Remove">
              <span aria-hidden="true">×</span>
          </button>
          <a href="#" class="formgallery-image" style="background-image: url(https://source.unsplash.com/MUnoV4capRk/640x426)">
          </a>
      </div>
      <div class="formgallery-item">
          <button type="button" class="close formgallery-remove" aria-label="Close" title="Remove">
              <span aria-hidden="true">×</span>
          </button>
          <a href="#" class="formgallery-image" style="background-image: url(https://source.unsplash.com/68csPWTnafo/640x426)">
          </a>
      </div>
      <div class="formgallery-item">
          <button type="button" class="close formgallery-remove" aria-label="Close" title="Remove">
              <span aria-hidden="true">×</span>
          </button>
          <a href="#" class="formgallery-image" style="background-image: url(https://source.unsplash.com/WGGSNlYzhKM/640x426)">
          </a>
      </div>
      <div class="formgallery-item">
          <button type="button" class="close formgallery-remove" aria-label="Close" title="Remove">
              <span aria-hidden="true">×</span>
          </button>
          <a href="#" class="formgallery-image" style="background-image: url(https://source.unsplash.com/UoqAR2pOxMo/640x426)">
          </a>
      </div>
      <div class="formgallery-item">
          <button type="button" class="close formgallery-remove" aria-label="Close" title="Remove">
              <span aria-hidden="true">×</span>
          </button>
          <a href="#" class="formgallery-image" style="background-image: url(https://source.unsplash.com/G35D9jK1Bf0/640x426)">
          </a>
      </div>
  </div>
  <button class="btn btn-light formgallery-action">
      Add Image
  </button>
</div>

4. Specify the number of images per row. 

• .formgallery-list-one
• .formgallery-list-two
• .formgallery-list-three
• .formgallery-list-four
• .formgallery-list-five

<div class="formgallery formgallery-list-five" id="myPicker" data-model="#input-images">
  ...
</div>

5. Execute a callback function when the user clicks the Add Image button.

$('#myPicker').formgallery({
  imagePicker: cb => cb([prompt('Image URL')])
})

6. Execute a callback function when the user clicks an image.

$('#myPicker').formgallery({
  imagePreviewer: true
})

7. API methods.

// add a new image
$('#myPicker').data('bs.formgallery').addImage(URL);

// clear the image picker
$('#myPicker').data('bs.formgallery').clear();

// preview an image
$('#myPicker').data('bs.formgallery').preview(index);

// execute the image picker callback
$('#myPicker').data('bs.formgallery').pick();

//remove an image
$('#myPicker').data('bs.formgallery').remove(index);

8. Event handlers.

$('#myPicker').on('add.bs.formgallery', function(e){
  // fired when an image is about to be added
})

$('#myPicker').on('added.bs.formgallery', function(e){
  // fired after an image is added
})

$('#myPicker').on('change.bs.formgallery', function(e){
  // fired after the image picker is changed
})

$('#myPicker').on('delete.bs.formgallery', function(e){
  // fired when an image is about to be deleted
})

$('#myPicker').on('deleted.bs.formgallery', function(e){
  // fired after an image is deleted
})

$('#myPicker').on('clear.bs.formgallery', function(e){
  // fired when the image picker is about to be cleared
})

$('#myPicker').on('cleared.bs.formgallery', function(e){
  // fired after the image picker is cleared
})

Changelog:

2019-10-04

• Improvement

---

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