Convert Colored Images Into Grey Images with jQuery Gray Plugin Gray - Free Download Convert Colored Images Into Grey Images with jQuery Gray Plugin - Gray

Free Download Convert Colored Images Into Grey Images with jQuery Gray Plugin – Gray

Posted on

This time I will share jQuery Plugin and tutorial about Convert Colored Images Into Grey Images with jQuery Gray Plugin – Gray, hope it will help you in programming stack.

Convert Colored Images Into Grey Images with jQuery Gray Plugin Gray - Free Download Convert Colored Images Into Grey Images with jQuery Gray Plugin - Gray
File Size: 91.3 KB
Views Total: 3292
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Gray is a jQuery plugin that allows you to convert images into greyscale images in all modern and legacy browsers. No Html5 canvas required.

How to use it:

1. Load the jQuery library and the jQuery gray plugin’s script and stylesheet files in the document.

1 <link rel="stylesheet" href="/path/to/css/gray.min.css" />
2 <script src="/path/to/cdn/jquery.min.js"></script>
3 <script src="/path/to/js/jquery.gray.min.js"></script>

2. Insert an image with CSS class of ‘grayscale’ into your document. The plugin will do the rest.

1 <img src="img/color.jpg" class="grayscale">

3. You can add a smooth fade effect on the grey image when hovered.

1 <img src="img/color.jpg" class="grayscale grayscale-fade">

4. The plugin also supports background image.

1 <div style="
2      background-image: url(img/color.jpg);
3      display         : inline-block;
4      width           : 180px;
5      height          : 72px;
6      "
7      class="grayscale">
8 </div>

5. Disable the plugin if needed.

1 $('.grayscale').toggleClass('grayscale-off');

Changelog:

2021-01-16

  • Add version with upgraded Modernizr

2017-06-06

  • Throw error when Modernizr feature detects not detected