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/
You can call imgCheckbox without any parameters on any jQuery collection containing <img> elements.
$("img.checkable").imgCheckbox();You can have multiple sets of imgCheckboxes with different parameters.
$("img.checkableGroup1").imgCheckbox();
$("img.checkableGroup2").imgCheckbox({ "graySelected": false });| 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] / Boolean | To preselect certain elements, use this syntax:{ preselect: [0,1,2] }Alternatively, you may preselect all elements using the syntax: { preselect: true } |
[] |
| 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) |
| 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 |
Event callbacks are accessible via the options object. Use the syntax:
$("img").imgCheckbox({
onload: function(){
// Do something fantastic!
},
onclick: function(el){
var isChecked = el.hasClass("imgChked"),
imgEl = el.children()[0]; // the img element
console.log(imgEl.name + " is now " + (isChecked? "checked": "not-checked") + "!");
}
});| Event | Explanation |
|---|---|
onload |
Fires when the initialisation of the imgCheckbox collection is complete. |
onclick |
Fires when an element is clicked. |
You can add any custom styles using the styles option. For example, to add a blur filter to selected images:
$("img").imgCheckbox({
"styles": {
"span.imgCheckbox.imgChked img": {
// This property will overwrite the default grayscaling, we need to add it back in
"filter": "blur(5px) grayscale(50%)",
// This is just css: remember compatibility
"-webkit-filter": "blur(5px) grayscale(50%)",
// Let's change the amount of scaling from the default of "0.8"
"transform": "scale(0.9)"
}
}
});- Firefox
- Chrome
- Opera
- IE8+ (untested on prior versions)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent