I design & develop websites.

I am a designer & developer. I am a communicator & strategist. I can add value to your business.

$.GreyScale jQuery Plugin

I was watching a video on Net.TutsPlus about using jQuery to grayscale images on the fly (revealing the coloured version on hover) and was very surprised to find no one (to my knowledge) had written a jQuery plugin encapsulating this idea. So I went ahead and wrote one.

The big problem with greyscaling images is that to access image data the image must be hosted locally for security reasons. Luckily Max Novakovic has written a jQuery plugin called $.getImageData which proxies requests for images using a server on Google's AppEngine which solves this problem for us. I have included it in the $.GreyScale plugin file for convenience.

Usage

Simply include jQuery and then greyScale.min.js into your page and then use the following code to trigger the greyscale effect. Currently the only editable parameter is the time (in ms) it takes to fade between the greyscale and coloured images.

      $(function() {
        // fade in the grayscaled images to avoid visual jump
        $('.greyScale').hide().fadeIn(1000);
      });
      // use window.load to ensure images have been loaded
      $(window).load(function () {
        $('.greyScale').greyScale({
          // call the plugin with non-defult fadeTime (default: 400ms)
          fadeTime: 500,
          reverse: false
        });
      });

Changelog

v 0.2

  • Added reverse functionality. Set reverse to true when calling the plugin to fade to black and white on hover rather than Vice versa.

A live example can be seen here and the project can be found on (and downloaded from) GitHub here.

Feel free to fork the code and play with it and if you find any bugs let me know in the comments below or via email at andrew@pryde-design.co.uk.

Update: I am getting emails telling me that the server used for proxying the requests is offline. I cannot make any guarantees about this server and as such you should implement your own on your servers using code from this GitHub repository.

53 Responses to $.GreyScale jQuery Plugin

  1. mark says:

    Hello your plugin on github don’t work. why?

  2. David says:

    As you can see the plugin for some reason aint working

    any ideas.

  3. David says:

    I am using the plugin for a clients section but for some reason it aint working, I have used this plugin on other projects and it works great but cant get my head around why aint working now.

    any ideas

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>