Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Clientside grayscale images on any browser

README.md

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,
    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

Something went wrong with that request. Please try again.