规则单选

规则单选

多选选择框式

有限多选

高光

不规则

Documentation

Image Picker Options

You can specify the following options when calling image picker:

hide_select

Default: true. Wheter the original select item should be hidden or not.

show_label

Default: false. If set to true, the text of each option will be added as a paragraph below each image.

limit

Default: undefined. If it's a select multiple and set to any value, it'll cap the selectable elements at that value.

Additionally you can specify the following callbacks:

initialized

Default: undefined. Specify a function to be called when the picker has been initialized.

changed

Default: undefined. Specify a function to be called when the picker has changed.

clicked

Default: undefined. Specify a function to be called when an option has been clicked.

selected

Default: undefined. Specify a function to be called when an option has been selected.

limit_reached

Default: undefined. Specify a function to be called when the limit cap has been reached.

Example:

        $("select").imagepicker({
          hide_select : true,
          show_label  : false
        })
      

Select data

You can also pass some data directly to the select tag:

data-limit

Optional. If it's a select multiple and set to any value, it'll cap the selectable elements at that value.

Example:

        <select multiple="multiple"
          data-limit='2'
        >
      

Options data

You can also pass some data on each option element of the select tag:

data-img-src

Required. The url of the image to use as a preview

data-img-label

Optional. If 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).

Example:

        <option 
          data-img-src='http://www.example.com/image.jpg'
          data-img-label='Just an image!'
          value='42'
        >