$.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.
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.
"Stack Overflow is currently offline for maintenance" <-- ability to do Computer Science coursework severely reduced!
Awesome plugin, the best I’ve found so far!
Keep it up Andrew.
Awesome!
Best greyscale plugin about!
Although, it’s more of a “greyscale on hover” plugin – It’d be nice to just have the functionality to switch to greyscale to use within our own events.
So I’m gonna rip this to pieces and have a go at that! Hope ya don’t mind :/
Kudos for spelling “greyscale” correctly – you must be another Brit
Hi Andy,
Yeah I am indeed another brit. I am currently re-writing the plugin to do exactly that as per another users request. Should be done by the end of this weekend. Feel free to fork the plugin on GitHub and implement it yourself though.
To set all images monochromatic use this:
$(‘img’).each(function(){
if ($.browser.msie) this.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)’
else {
var canvas = document.createElement(‘canvas’)
canvas.width = this.width
canvas.height = this.height
var ctx = canvas.getContext(’2d’)
ctx.drawImage(this,0,0)
var thisd = ctx.getImageData(0,0,this.width,this.height)
var pix = thisd.data
for (var i = 0, n = pix.length; i < n; i += 4) pix[i] = pix[i+1] = pix[i+2] = (pix[i] + pix[i+1] + pix[i+2]) / 3
ctx.putImageData(thisd, 0, 0)
this.src = canvas.toDataURL()
}
});
This doesn’t proxy requests to images on external servers so browsers will throw errors due to the fact you’re making cross domain XMLHttpRequests. I’ll expose this functionality in an update shortly.
Hey, thanks for this great piece of jQuery.
I’ve got an issue tho: I don’t know if you’ve tested it with image borders. The canvas positioning is wrong when you have a border around your image.
I’m afraid I’ve been manic this summer and haven’t had time to make the amends and do the testing that I would like to be able to. I will get to it ASAP and any pull requests on github with associated fixes will be warmly received.
It works! Thank you!!
It’s not work with jQuery 1.3.2
, i’m try this script on Drupal and Drupal still use 1.3.2
Does it require that it runs on a webserver? I’m trying this on my localhost using an my IP adres, it doesn’t work.. Looking into your javascript I see
getImageData=function(a){var f=/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@".So does it requires a www? Because external images are working.
It requires you to be running a web server (i.e. you can’t just load it from your filesystem using your browser) but it doesn’t require a domain. I’ve done testing just using http://localhost.
Hi Andrew,
I managed to fix the greyscale jQuery, but now I was wondering if it is also possible to combine this jQuery with an opacity animation that goes from 50% to 100%.
What I mean is that first the image is greyscale and 50% opacity, and when the user hovers over the image, it will become full color with 100% opacity.
I actually have no clue if this is even possible, and I hope you can help me with it.
Chris
i have tried it in more than a week. But i found it here very very useful. You have saved my time. Very good tutorial. Thanks
Stopped Working
Over Quota
This application is temporarily over its serving quota. Please try again later.
Hi Necolas,
Unfortunately without a local instance of the JSON proxy that this plugin uses I can never guarantee that it will continue to work. I am hoping to be able to dedicate some time to improving the plugin and writing an open source JSONP image proxy server in the near future