Turn a simple <select> element into an Image Picker 🖼
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
src
.eslintrc.json
.gitignore
.release-it.json
LICENSE
README.md
gulpfile.js
package.json
yarn.lock

README.md

Box Image Picker

release release npm

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

Box Image Picker Example

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 git@github.com: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