Imgcheckbox NPM

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.

$("img.checkable").imgCheckbox();

You can have multiple sets of imgCheckboxes with different parameters.

$("img.checkableGroup1").imgCheckbox();
$("img.checkableGroup2").imgCheckbox({ "graySelected": false });

Options

Methods

Events

Event callbacks are accessible via the options object. Use the syntax:

$("img").imgCheckbox({
    onload: function(){
      // Do something fantastic!
    }
});

Advanced

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)"
		}
	}
});