Description
imgCheckbox is a jQuery plugin that makes img tags checkable (much like Google's recaptcha image selection tool). See it in action on the demo page: http://jcuenod.github.io/imgCheckbox/
Usage
You can call imgCheckbox
without any parameters on any jQuery collection containing <img>
elements.
;
You can have multiple sets of imgCheckboxes with different parameters.
;;
Options
Option | Type | Values | Default |
---|---|---|---|
checkMarkImage | URL | Supports anything your browser support in the background-image property (of a pseudo selector). |
SVG Data URI which draws a white tick on semi transparent green. |
graySelected | Boolean | Convenience option: Adds the necessary CSS rules to apply a grayscale filter on selected images. | true |
scaleSelected | Boolean | Convenience option: Adds the necessary CSS rules to apply a downscaling filter on selected images. | true |
fixedImageSize | Boolean / String | Sets a fixed image size to all images (useful if images vary in size). Values can be "200px" or "120px 200px" (not percentages). | false |
checkMarkSize | Boolean / String | Sets a custom size for the image (Useful if your images are very large or very small and the default is not suitable). Values can be "30px" and "20px 30px" (note: percentages do not work). | "30px" |
checkMarkPosition | String | Sets the position of the checkMark. Options are: top-left , top , top-right , left , center , right , bottom-left , bottom , bottom-right etc. (for more advanced positioning, the styles option can be used on span.imgCheckbox::before ) |
top-left |
scaleCheckMark | Boolean | Convenience option: Adds the necessary CSS rules to apply a zooming effect on the checkmark as it appears and disappears. | true |
fadeCheckMark | Boolean | Convenience option: Adds the necessary CSS rules to fade the checkmark in and out. | false |
addToForm | Boolean / jQuery | imgCheckbox can inject the checked elements into the form. If true , imgCheckbox will find a parent form and hook into its submission. A jQuery object can be passed in and the submit listener will attach to it. |
true |
preselect | [Integer] | To preselect certain elements, use this syntax:{ preselect: [0,1,2]} |
[] |
radio | Boolean | Images function as radio/option buttons (rather than checkboxes). Only one can be selected. No element is automatically preselected (see preselect ). |
false |
canDeselect | Boolean | When the radio option is set to true, this option allows the selected image to be deselected. | false |
styles | Object | For advanced customisation, the full stylesheet is applied using this object. | (see source) |
Methods
Method | Usage | Return |
---|---|---|
$.select() |
Selects the element (if it is a member of an imgCheckbox group). If the element is part of a radio group, the other elements will be deselected. | jQuery |
$.deselect() |
Deselects the element (if it is a member of an imgCheckbox group). Other elements are unaffected (even in radio groups). | jQuery |
Events
Event callbacks are accessible via the options object. Use the syntax:
;
Event | Explanation |
---|---|
onload |
Fires when the initialisation of the imgCheckbox collection is complete. |
onclick |
Fires when an element is clicked. |
Advanced
You can add any custom styles using the styles
option. For example, to add a blur filter to selected images:
;
Compatibility
- Firefox
- Chrome
- Opera
- IE8+ (untested on prior versions)