$.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.
No public Twitter messages.
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
Loving this plugin!
Thanks for sharing… encountered the over quota issue and was trying to configure the php version locally on my own webserver… Do I need to alter the JS file in order to serve my own version of getImageData.php? and if so, where about’s in the script would I make the change?
How can I remove de effect
I have to function, one is for set the greyscale and another is for remove.
So, I tryed something like this:
jQuery(‘.greyscale’).greyScale(false);
or
jQuery(‘.greyscale’).hide().greyScale();
Hi Andrew,
do u know how to cope it with jquery 1.6.2?
cheers
Pingback: J.Doe Photography HTML5 Template (Photography) | WP Themes
Great plugin, the better i saw.
Pingback: J.Doe Photography HTML5 Template (Photography)
Hi Andrew,
As it stands this option isn’t very well exposed. A future update will include the server as an option within the object.
Pingback: J.Doe Photography HTML5 Template (Photography) | Download Web Template PHP Script Wordpress Theme Plugin Graphic 3D Model
Awesome plugin.But not working in Chrome.Any help?
its not working at chrome what i do for it?????????????
Pingback: J.Doe Responsive Photography Wordpress Theme (Photography) | Themes Tub
Hi, thanks for the code! Anyway, somehow after few days after i used it, only the last image in my list become grey and the image keep changing to another grey image when i hover. It was working fine. Is there any idea why this happen?
Has there been any discussion about the Chrome functionality?
Hi Aaron,
Take a look at the rewrite branch on GitHub. This is a work in progress but it should solve the problems with both jQuery 1.8 and Chrome.
Hello,
Thank you, this plugin is awesome !
It works like a charm.
But, i have css issue when i try to add another jquery function.
Could you have a look at my page ?
Here is what i want :
demo jquery greyscale
the plugin works very well.
But i want to add this function in order to show information over image on rollover :
show information over image on rollover – jquery
The result is an issue with my css and i could not find the answer :
greyscale jquery + show information over image on rollover
Could you help me ? Thank you very much !
I’ve asked a question on stackoverflow
It seems it’s more complexe than i expected. If you look at my last jquery greyScale example, youl’ll see what i was trying.
Si it works but i had to use a table and modify the plugin (remove the css property of the gsWrapper : ‘position:relative’ and ‘display:inline-block’ )
Do you know if there is a better way (with css) ?
Doesn’t work at all.
“Uncaught TypeError: Cannot call method ‘split’ of undefined”
GREAT PLUGIN….. this plugin works in chrome too…. but you need to run it on local server or to your hosting site…if you run the file locally it won’t work on chrome…..thank you so much for this plugin…GREAT JOB INDEED.
fantastic! works a charm, thank you!
I did add “click” to “mouseover” etc, as I find if the link is pressed, and then the page returned to via browser back button, the image stays full-colour. I would prefer they all stay uniformly grey. the code was very amenable to modification.
Jay, you’ll have to give me more information than that. What browser? What version of jQuery? Which version of my script are you using?
Hi Andrew
I am having difficulties with the plugin, I am using it on a WordPress site and everything is defined accordingly however I am getting the error “TypeError: $(“.greyScale”).greyScale is not a function” in all browsers seems like it could just be a simple fix I’ve missed using the same jQuery as in your example.
I have read a few bugs above and am using the latest version of the plugin https://github.com/Prydie/jQuery-GreyScale-Plugin/tree/rewrite any ideas ? or if your willing to look at a link i can provide
Thanks
Poppy
Thanks for the lovely plugin, this what I am really looking for.
Great code, works flawlessly.
I have a query: is it at all possible to modify this plugin to put a color tint on the greyscaled image?
Poppy: I can take a look. E-mail me the link and I’ll see what I can do.
Saulius: If you post a report on the GitHub repository with a feature request I’ll assign it to a milestone and try and get it done.
thanks dude! works pretty great and exactly what i was looking for!
Hej! thanks for the plugin, works good but I have some troubles in IE10. It doesn’t add the canvas elements and nessecary css. So the plugin isn’t working.
Chrome & FF are working fine.
Works great, thnx!
Q: Is there a way to trigger the fade-to-color when hovering the parent element of the image?
(see: http://avdr.nl/mcdlr)
Hi Andrew!
Can you helpme to include this plugin in WordPress theme?
The theme have an opacity effect. I need replace with grayscale effect.
Thank you
Hi Andrew I tried to use your code on my testing page and have a problem with the .greyScale images overlapping the sticky menu bar when scrolling down http://www.business-logo.co.uk/index2.html Is there any solution for this please?
Thank you very much
Hi Andrew,
Really nice plugin. Just what i need.
Thanks a lot.
I’ve been loving your plugin for my portfolio! I happened there today and noticed the effect was broken -the js error was “$.browser.msie : cannot read property of undefined ” -I had loaded the page automatically to the latest jQuery {lesson learned..} and 1.9.0 has apparently broken it -I am sticking with 1.8.3 for the time being, and that works fine -But thought I would let you know as apparently you will not be alone in that symptom.
Thanks very much again!
Cheers,
Ellen
@Ellen It appears that $.browser was removed in version 1.9. Try the rewritten version (will be released as the main version once I get a chance to do some more testing). The rewritten version uses feature detection instead of browser detection.