Image Picker & Previewer For Bootstrap - Form Gallery
File Size: | 455 KB |
---|---|
Views Total: | 4705 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.