Form Gallery

Use Bootstrap's JavaScript form gallery plugin to add image picker/preview in your regular form which hold multiple image at once.

This plugin do not handle file picker, or file upload, and image previewer. You need to define function for image picker, and previewer ( if any ).

Examples

Form Gallery Components

This is an example of form gallery component with preset images as default value. Clicking the image will do nothing as we do not define image previewer.

You can change total item per row up to 5 by using class .formgallery-list-five.

Below image is taken from unsplash.com

Usage

The form gallery plugin component make it easy for user to select images instead of browser default input form control. The original image URL saved in the model element. Any change to the model will update the component only if the element already initialize manually.

Initialization can be done with js or by element attribute.

Via JavaScript

Call a form gallery with id myFormGallery with a single line of JavaScript

$('#myFormGallery').formgallery(options);

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-maxsize="".

NameTypeDefaultDescription
imagePicker function cb => cb([prompt('Image URL')])

Function to call when user click the Add Images button. You've to provide this function by your self. This module not provide any. If the value is a string, it will try to find it from window method ( TODO ).

The function get called with parameter function cb as the first argument, and object formgallery as the second argument.

The callback function expect to be called with the first parameter as array list of image.

imagePreviewer boolean|function true

Function to call when user click any of exists image. It means to show some kind of image previewer. The function will be called with array list of image as the first parameter, and index of the clicked image as the second parameter.

Methods

.formgallery(options)

Activate your content as a form gallery component. Accept an optional options object.

$('#my-form-gallery').formgallery({ imagePicker : cb => cb([{...}]), imagePreviewer : (urls, index) => alert(url[index]) })

#.addImage(URL)

Add new image to the collection.

$('#my-form-gallery') .data('bs.formgallery') .addImage(URL)

#.clear()

Back to empty state, and remove the value of the model.

$('#my-form-gallery') .data('bs.formgallery') .clear()

#.preview(index)

Execute preview callback and index of image as the first parameter.

$('#my-form-gallery') .data('bs.formgallery') .preview(0)

#.pick()

Execute image picker callback.

$('#my-form-gallery') .data('bs.formgallery') .pick()

#.remove(index)

Remove an image from collection by index number of the image.

$('#my-form-gallery') .data('bs.formgallery') .remove(index)

Events

Bootstrap's form gallery class exposes a few events for hooking into form gallery functionality. All form gallery events are fired at the form gallery container itself (i.e at the <div class="formgallery">).

Event TypeDescription
add.bs.formgallery This event fires immediately when new image is about to add to the collection. It's when model value not yet change, and the view not yet updated.
added.bs.formgallery This event fires immediately when new image just added to the collection. It's when model value changed, and the view already updated. The change.bs.formgallery called right after this.
change.bs.formgallery This event fires immediately when data in model changes. It's when model value already changed, and the view already updated.
delete.bs.formgallery This event fires immediately when an image is about to remove from the model. It's when model value not yet changed, and the view not yet updated.
deleted.bs.formgallery This event fires immediately when an image just removed from model. It's when model value changed, and the view already updated. The change.bs.formgallery called right after this.
clear.bs.formgallery This event fires immediately when model value truncated to an empty array string. It's when model value not yet changed, and the view not yet updated.
cleared.bs.formgallery This event fires immediately when the model value truncated. It's when model value changed, and the view already updated. The change.bs.formgallery called right after this.
$('#my-form-gallery').on('added.bs.formgallery', function(e){ // do something... })