2

James here. I've looked at over 50 tutorials, but I cannot seem to find an easy compact jQuery greyscale tutorial. Every single script I've tried just will not work on the site i am trying to enable this on. If anyone could assist me in my journey to have a script that makes images WITHOUT A HEIGHT, but a width of 500px greyscale on page load but change to color on hover, it would be awesome. I believe this script would use HTML5 Canvas.

Page I'd like to do this on: http://jamestestblog.tumblr.com/

James Charless Dickinson
  • 446
  • 5
  • 17
  • 41

3 Answers3

6

There's a library for this called Hoverizr you should look at.

Hoverizr takes advantage of the <canvas> element's image proccessing capabilities. What this means is that Hoverizr gets info on each separate pixel of the image and proccesses it acoordingly.

Then, depending on whether you wanted the manipulated image to be above or below the original, on mouse over the top element fades out to reveal the element below.

Code looks like:

$('#imageid').hoverizr({effect:"grayscale"});
artlung
  • 33,305
  • 16
  • 69
  • 121
  • So this is for http://jamestestblog.tumblr.com/ and for images like: http://29.media.tumblr.com/tumblr_lvxhd8XX511qiv23bo1_500.jpg right? What errors did you get in the debugging tools for your browser (Chrome, Firefox, or IE) -- maybe you got JavaScript errors? It would be helpful if you shared the error you got. – artlung Mar 01 '12 at 00:53
  • You might look at the solution here: http://stackoverflow.com/questions/286275/gray-out-image-with-css – artlung Mar 01 '12 at 00:56
  • Additionally, apparently IE will respect CSS like `` – artlung Mar 01 '12 at 01:04
1

For security reasons, javascript and a canvas element won't be able to modify an image obtained from another domain.

See details at: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements

rjz
  • 16,182
  • 3
  • 36
  • 35
  • Thats inaccurate. While you can not obtain the content of a canvas which used such an image as a source (as the whole canvas becomes locked down in that case), you can still manipulate the canvas. Only the methods listed in the referenced article are unavailable, but they are not required to perform a greyscale conversion. – Ext3h Nov 01 '13 at 19:44
0

If you want to do something like that with javascript you have to use a canvas. jQuery on its own can't do this. There are alternatives however. The most simple is to use a sprite or two different images superposed and animate | hide | show.
If there are lots of images then another option is to use something like the gd library in php on the backend. You could then load them dynamically with ajax from a simple php file.

elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • I can't use that either. I want to achieve this on a web blog where I don't actually make the pictures I post, I simply reblog them. I don't have time to make a greyscale version of each image, and also, each image isn't coded using tags, They are coded like {block:Photo}{/block:Photo} – James Charless Dickinson Feb 29 '12 at 23:39