jQuery.BlackAndWhite 0,0,0,0,0,0 travis-ci grunt Bower npm

Clientside grayscale images on any browser

3 years after MIT

Build Status devDependency Status license

This plug-in can easily convert every colored image (in an html page) into a B&W greyscale image. Read the plugin API on here http://gianlucaguarini.github.io/jQuery.BlackAndWhite/.

Usage

1 Include the plug into the page:

<script src="js/jQuery.BlackAndWhite.js"></script>

2 Set the image wrappers using the css:

.bwWrapper {
    position:relative;
    display:block;
}

3 Initialize the plug in:

$('.bwWrapper').BlackAndWhite({
    hoverEffect : true, // default true
    // set the path to BnWWorker.js for a superfast implementation
    webworkerPath : false,
    // to invert the hover effect
    invertHoverEffect: false,
    // this option works only on the modern browsers ( on IE lower than 9 it remains always 1)
    intensity:1,
    // this option enables/disables the attribute crossorigin=anonymous on image tags. Default true.
    // please refer to https://github.com/GianlucaGuarini/jQuery.BlackAndWhite#important
    crossOrigin: true,
    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
        fadeIn: 200, // 200ms for fadeIn animations
        fadeOut: 800 // 800ms for fadeOut animations
    },
    onImageReady:function(img) {
        // this callback gets executed anytime an image is converted
    }
});

IMPORTANT

the script works only for the images hosted on the same server in which the page is loaded!

Lightweight solution

If you are looking for a lightweight solution, you can use the following css instead, but it's not 100% crossbrowser:


img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    transition: 0.3s ease-in;
}

img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

Plugin Showcase


Top Contributors

GianlucaGuarini PeterDaveHello fgenghini thomasd

Dependencies

package version
dev grunt *
grunt-contrib-copy *
grunt-contrib-jshint *
grunt-contrib-uglify *

Releases

-   v0.3.8 zip tar
-   v0.3.6 zip tar
-   v0.3.4 zip tar
-   v0.3.3 zip tar
-   v0.3.2 zip tar
-   v0.3.1 zip tar
-   v0.3.0 zip tar
-   v0.2.9 zip tar
-   v0.2.8 zip tar
-   v0.2.7 zip tar
-   v0.2.6 zip tar
-   0.3.7 zip tar