JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    J Query.black and White

    Clientside grayscale images on any browser
    Filed under  › 

    • 🔾24%Overall
    • 311
    • 39.6 days
    • 🕩131
    • 👥4

    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

    Show All