nethru / image-grayscale

A simple library that applies gray-scale effect to the images on your page, using JavaScript and CSS only.

image-grayscale

A simple library that applies gray-scale effect to the images on your page, using JavaScript and CSS only.

Here is the demo.

Requirements

• jQuery

Install

Include following files into your page:

• image-grayscale.min.css
• image-grayscale.min.js

Basic Usage

(function($) {
	$(function() {
		$(".myimage").imggrayscale();
	});
})(jQuery);

Methods

init

Initialize the imggrayscale, same as $(".myimage").imggrayscale().

$(".myimage").imggrayscale("init");
// same effect as $(".myimage").imggrayscale();

resize

When the original image size is changed, call this method to resize the gray-scale effect.

$(window).on("resize", function() {
	$(".myimage").imggrayscale("resize");
});

destroy

Destroy the gray-scale effect.

$(".myimage").imggrayscale("destroy");

Settings

imggrayscale supports setting parameters during initialization.

hoverShowOrigin

When hoverShowOrigin set to true, the original image will be shown when mouse over it. (Default is false)

$(".myimage").imggrayscale({hoverShowOrigin: true});

MIT License

image-grayscale is released under the MIT License.