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

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

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

See also:

How to use it:

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

<link rel="stylesheet" href="css/gray.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

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

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

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

4. The plugin also supports background image.

<div style="
     background-image: url(img/color.jpg);
     display         : inline-block;
     width           : 180px;
     height          : 72px;
     " class="grayscale">
</div>

Change log:

2017-06-06

  • Throw error when Modernizr feature detects not detected

This awesome jQuery plugin is developed by karlhorky. For more Advanced Usages, please check the demo page or visit the official website.