Image Picker is a simple jQuery plugin that transforms a select element
into a more user friendly graphical interface.
View in Github
Download the project
- Works great on both single and multiple select elements.
- Integrates nicely with Twitter's Bootstrap markup.
What it does?
It turns a select element into a more user friendly interface, e.g.:
Note: Select items are hidden by default when using Image Picker.
They are left visible in the examples for pedagogical purposes.
How it works?
Simply add the attribute
with the url of the image you want to use as a preview, e.g:
Then just call imagepicker on the target elements.
If you want to allow blanks, just include an extra option with an empty value and
no image data associated. Clicking a selected image will deselect it.
Image Picker works great on select multiple elements too.
You can also use the options text as labels by passing the option
You can specify more complex labels by passing them as part of the option data in
data-img-label. You can even specify HTML code.
By default, Image Picker does not resize or order your images in any way, there are better tools
for it if you need it. It can look great if your images are properly designed and ordered.
Or awful if they are just some random images. Thankfully, it works great with third
party grid aligning scripts like Masonry.
Image Picker Options
You can specify the following options when calling image picker:
- Default: true. Wheter the original select item should be hidden or not.
Default: false. If set to true, the text of each option will be added as
a paragraph below each image.
hide_select : true,
show_label : false
You can also pass some data on each option element of the select tag:
- Required. The url of the image to use as a preview
show_label is set to true when calling
imagepicker(). Then this content will be used as a label for
the displayed image. This will not be escaped so you can actually put HTML
here (although I wouldn't recommend it).
data-img-label='Just an image!'