jaydens/gray

Make an image gray in all browsers

gray

Make an image gray in all browsers. Demo.

Support:

• IE 6-9
• IE 10-11 (inline SVG via JavaScript)
• Firefox 10+, Firefox on Android
• Chrome 19+, Chrome for Android 25+
• Android Browser 4.4+
• Safari 6+, Safari iOS 6+
• Opera 15+, Opera Mobile 16+
• BlackBerry Browser 10+

Installation

You can install with Bower:

bower install --save gray

Or use the CDN links:

//cdn.jsdelivr.net/jquery.gray/1.3.2/gray.min.css
//cdn.jsdelivr.net/jquery.gray/1.3.2/jquery.gray.min.js

Or you can just download it.

How to Use

1. Add the CSS from gray.css.

2. Add the plugin after jQuery at the bottom of the body.

   <script src="/js/jquery.gray.min.js"></script>

   The plugin automatically initializes for all elements with a class of grayscale. The plugin can also be called manually with:

   $('.my-grayscale-class').gray();

3. Add your image with a class of grayscale.

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

   Images with CSS background-image, background-size and (numeric) background-position are also supported:

   <div style="
     background-image   : url(/img/color-sprite-lg.png);
     background-size    : auto 72px;
     background-position: -180px 0;
     display            : inline-block;
     width              : 180px;
     height             : 72px;
   " class="grayscale"></div>

4. (Optional) Add class of grayscale-fade if you want transitioning from grayscale back to color on hover

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

5. Revel in your absolute and utter awesomeness.

Changelog

• v1.3.2: remove grayscale on hover in ie6-9 (fade option), use same svg filter in polyfill as in css
• v1.3.1: bugfix for empty gray class name
• v1.3.0: rename fade class to grayscale-fade to resolve conflict with bootstrap
• v1.2.0: IE shim: Copy styles from element to replacement element
• v1.1.1: Improve documentation and demo
• v1.1.0: Support for background images with basic background-size and background-position
• v1.0.0: First basic version with support for <img> tags

TODO

• background-size: cover, background-size: contain
• feature detection for SVG filters instead of client detection
• better JavaScript templating for SVG

License

MIT © kununu