Box Image Picker

Turn a simple <select> element into an Image Picker 🖼

Installation

Just add the js & css files

<link rel="stylesheet" href="dist/box-image-picker.min.css" />
<script src="dist/box-image-picker.min.js"></script>

Usage

In your HTML file add your <select> element:

<select id="imagepicker">
    <option value="image1" data-img-src="image1.jpg">Image 1</option>
    <option value="image2" data-img-src="image2.jpg">Image 2</option>
    <option value="image3" data-img-src="image3.jpg">Image 3</option>
    <option value="image4" data-img-src="image4.jpg">Image 4</option>
</select>

And then in your JS file, add:

var imagepicker = new BoxImagePicker('#imagepicker', {
    // options
});

Options

Option	Default	Description
hide_select	true	Hide the original <select> element.
grid_col	4	The number of boxes in each row.
spacing	5	Padding in between the boxes.
border_size	5	The border width of the selected box.
show_label	false	Display the option label at the bottom of each box.
onSelect	function(index, value) {}	Add your own callback function when a box is selected.

Methods

Method	Arguments	Description
getSelected	-	Get the index and value of the selected image.

Development

Feel free to implement anything from the roadmap, submit pull requests, create issues, discuss ideas or spread the word.

Add Box Image Picker to your dev folder:

$ git clone [e-mail]:jeffbocala/box-image-picker.git

Install dependencies (make sure you have yarn):

$ yarn install

To build your changes:

$ yarn build

or you can watch for changes using:

$ yarn dev

After git add-ing, commit your changes using:

$ yarn commit

DO NOT USE git commit.

Credit

Thanks for inspiration : https://github.com/rvera/image-picker

Built with ❤️ by Jeff Bocala