jQuery.BlackAndWhite – Convert coloured images to B&W

This plug-in can easily convert any colored image into a B&W greyscale image. It uses the the HTML5 canvas tag and a fallback for the old browsers. There are three options to choose from – normal, hover effect inverted and ajax content.

You can easily implement it in your projects and achive classy look of your images.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

jQuery.BlackAndWhite jQuery.BlackAndWhite

Demo Download



 1 Include the plug into the page:

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

2 Set the image wrappers using the css:

.bwWrapper {

3 Initialize the plug in on window load (no $(document).ready()):

hoverEffect : true, // default true
// set the path to BnWWorker.js for a superfast implementation
webworkerPath : false,
// for the images with a fluid width and height
// to invert the hover effect
invertHoverEffect: false,
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

Plugin Showcase


Related post:  Tips for web and graphic design students to make extra cash
Divi WordPress Theme

You may also like...

1 Response

  1. teocomi says:

    Great work!

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.