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.
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.
2 |
background-image: url(img/color.jpg); |
3 |
display : inline-block; |
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