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.

jQuery.BlackAndWhite jQuery.BlackAndWhite

Demo Download

 

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 on window load (no $(document).ready()):

 $(window).load(function(){
$('.bwWrapper').BlackAndWhite({
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
responsive:true,
// 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

@GianlucaGuarini

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.

Close