Home Image EffectsImage black and white switch with jQuery.

Image black and white switch with jQuery.

11 years ago Views

22726

3738

gianlucaguarini

Image black and white switch with jQuery.

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

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
        }
    });
});

The article source:http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/

Tag: image hover